Numero di colonne CSS che divide la tabella in due colonne diverse

Question

Sto cercando di creare colonne simili a giornali sulla mia pagina. Tuttavia, la mia pagina contiene tabelle e in IE, Chrome, Safari e Opera, la tabella viene separata in due colonne diverse, ma non è questo il comportamento che voglio. Dove c'è un tavolo, mi piacerebbe averlo interamente all'interno di una colonna. Ecco il codice:

.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>

Un modo semplice per vedere il problema e violino con esso è quello di utilizzare Chrome e andare a http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap e incollare il codice nella loro esempio con la mia. Se provi Firefox vedrai che la tabella rimane interamente nella colonna di sinistra.

Answer 1

Aggiungi column-break-inside: avoid; al vostro tavolo:

.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

io non sono al 100% su ciò che si sta cercando di realizzare qui ...

Se non si vuole 2 colonne è sufficiente rimuovere il CSS. http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

Se si desidera che il paragrafo sia a destra, fare in modo che il tavolo si sposti verso sinistra. http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{ 
    float:left; 
} 

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