CSS sütun sayımı tablosumu iki farklı sütuna ayırıyor

Question

Sayfanın üzerinde gazete benzeri sütunlar oluşturmaya çalışıyorum. Ancak, sayfam tablolar içeriyor ve IE, Chrome, Safari ve Opera'da tablo iki farklı sütuna ayrılıyor, bu benim istediğim davranış değil. Bir masanın olduğu yerde, tamamen bir sütuna sahip olmak isterim. İşte bazı kod:

.newspaper { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 5px; /* Firefox */ 
 
    column-gap: 5px; 
 
}

<div class="newspaper"> 
 
    <table> 
 
    <tr><td>Table Row 1</td></tr> 
 
    <tr><td>Table Row 2</td></tr> 
 
    <tr><td>Table Row 3</td></tr> 
 
    <tr><td>Table Row 4</td></tr> 
 
    </table> 
 
    <p>Paragraph</p> 
 
</div>

onunla sorunu ve keman görebilmek için kolay bir yol Chrome kullanın ve http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap gidip mayın ile örnekteki kodu üzerinde yapıştırmaktır. Firefox'u denerseniz, tablonun tamamen sol sütunun içinde kaldığını göreceksiniz. Sadece css kaldırmak 2 sütun istemiyorsanız

Answer 1

masanıza column-break-inside: avoid; ekleyin:

.newspaper { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 10px; /* Firefox */ 
 
    column-gap: 10px; 
 
    border:dotted 1px #ccc; 
 
} 
 
.newspaper table { 
 
    -webkit-column-break-inside:avoid; 
 
    -moz-column-break-inside:avoid; 
 
    -o-column-break-inside:avoid; 
 
    -ms-column-break-inside:avoid; 
 
    column-break-inside:avoid; 
 
}

<div class="newspaper"> 
 
    <table> 
 
    <tr><td>Table Row 1</td></tr> 
 
    <tr><td>Table Row 2</td></tr> 
 
    <tr><td>Table Row 3</td></tr> 
 
    <tr><td>Table Row 4</td></tr> 
 
    </table> 
 
    <p>Paragraph</p> 
 
</div>

Answer 2

Burada gerçekleştirmek için çalışıyoruz ne değil% 100 ...

değilim. http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

Paragrafın sağda olmasını istiyorsanız, tabloyu sola kaydırın. http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{ 
    float:left; 
} 

p{ 
    position:relative; 
    left: 20px; 
}