CSS column-count split my table into two different columns

I'm trying to create newspaper-like columns on my page. However, my page contains tables, and in IE, Chrome, Safari, and Opera, the table is being separated into two different colums, and this is not the behavior that I want. Where there is a table, I would like to entirely within one column. Here is some code.

<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>

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

</body>
</html>

An easy way to see the problem and fiddle with it is to use Chrome and go to http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap and paste over the code in their example with mine. If you try Firefox you will see that the table stays entirely within the left column. Thanks for any help you can provide.

Use this:

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

Related Articles