5

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 columns;this is not the behavior that I want. Where there is a table, I would like to have it entirely within one column. Here is some code:

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

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
J Fournier
  • 190
  • 3
  • 9
  • So, what do you want is your table on the left and paragraph on the right, right> – Hendry Tanaka Oct 13 '14 at 04:36
  • Yes, but the reason I am using column-count is because my page is dynamic, and I want it to always take up the minimum amount of vertical space. There could be a paragraph above the table as well, and I don't know which will be longer, so I am using column-count to layout the page, but I don't want the table split into two different columns. – J Fournier Oct 13 '14 at 04:42
  • I'm sure with my answer. But you must have a lot of paragraph. It will work fine. – Hendry Tanaka Oct 13 '14 at 05:03

2 Answers2

4

Add column-break-inside: avoid; to your table:

.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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Hendry Tanaka
  • 454
  • 3
  • 11
  • 1
    Thanks so much! This seems to work if I slightly modify your suggestion and add .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; } Want to modify your answer so I can accept it? – J Fournier Oct 13 '14 at 05:05
  • Why must the table? What is the longest? The table or paragraph? But. As you wish.. – Hendry Tanaka Oct 13 '14 at 05:06
  • I don't know in advance which will be longer, the stuff before or after the table. There will be lots of tables and paragraphs on the page. I don't care so much whether paragraphs are split between the columns. It is the tables splitting that bothers me. Thanks again! – J Fournier Oct 13 '14 at 05:10
  • FYI - After using the above, Chrome, Safari, Opera, and Firefox were working, but not IE. I changed -ms-column-break-inside to break-inside, and now it's working in all five of those browsers. – J Fournier Oct 13 '14 at 12:28
0

I'm not 100% on what you are trying to accomplish here...

If you don't want 2 columns just remove the css. http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

If you want the paragraph to be on the right then make the table float left. http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{
    float:left;
}

p{
    position:relative;
    left: 20px;
}
DevVex
  • 143
  • 1
  • 6
  • Thanks for your interest. I definitely need two columns because I want the content to take up less room on the page. I don't know in advance whether I want the table on the left or on the right, because the page is dymanic, with lots of tables and text on it, and that is why I am using column-count to layout the page automatically like newspaper columns. It works exactly how I want in firefox. I was hoping I could add a style to the table that would keep it from splitting up, sort of like you can do with page-break-inside: avoid, in order to get it to work in all browsers. – J Fournier Oct 13 '14 at 05:01