CSS column-count splitting my table into two different columns

Question

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.

So, what do you want is your table on the left and paragraph on the right, right> — Hendry Tanaka
– Hendry Tanaka, Commented Oct 13, 2014 at 4: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
– J Fournier, Commented Oct 13, 2014 at 4:42
I'm sure with my answer. But you must have a lot of paragraph. It will work fine. — Hendry Tanaka
– Hendry Tanaka, Commented Oct 13, 2014 at 5:03

TylerH · Accepted Answer · 2017-10-05 19:09:18Z

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>

edited Oct 5, 2017 at 19:09

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Oct 13, 2014 at 5:00

Hendry Tanaka

4643 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

J Fournier Over a year ago

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?

Hendry Tanaka Over a year ago

Why must the table? What is the longest? The table or paragraph? But. As you wish..

J Fournier Over a year ago

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 Over a year ago

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.

DevVex · Accepted Answer · 2014-10-13 04:49:22Z

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

answered Oct 13, 2014 at 4:49

DevVex

1431 silver badge6 bronze badges

1 Comment

J Fournier Over a year ago

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.

Collectives™ on Stack Overflow

CSS column-count splitting my table into two different columns

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related