Split table into css columns, issue in Firefox

Question

I have a table which should be divided into two columns (layout columns, not table columns).

Works fine in all major browsers, except Firefox, which doesn't break the table into two columns.

.column-layout {
  columns: 2;
}

<div class="column-layout">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

You can "run the snippet" in Chrome to see how it should look like. Firefox renders the table in a single row.

The reason for this: There are some long tables, which should be divided into a two column layout in printview.

Is there a workaround to learn Firefox how to break tables into multiple columns?

I am very surprised to hear this works anywhere at all. And the table is in two columns. — connexo
– connexo, Commented Feb 20, 2019 at 19:33
Add this and see if it works: -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; — Katy H.
– Katy H., Commented Feb 20, 2019 at 19:35

G-Cyrillus · Accepted Answer · 2019-02-21 22:18:06Z

0

For firefox, you need also to break the table-layout display but, then it is not a behaving like a table anymore, columns and rows won't match anymore and noway to use rowspan nor colspan.

the easiest is to reset table's element to display:block;. (think about tbody which is generated by the browser even when missing within the HTML code).

.column-layout {
  columns: 2;
}


/* reset table-layout behavior of HTML table to allow here column-layout but loose the table-layout*/

.column-layout table,
.column-layout tbody,/* don't forget me, i'll be there */
.column-layout tr {
  display: block;
}

<div class="column-layout">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

pen to play with

edited Feb 21, 2019 at 22:18

answered Feb 20, 2019 at 23:25

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

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

1 Comment

Mikel Wohlschlegel Over a year ago

This worked. But anyway I decided to convince the customer not to go with this solution, as this combination between columns (not 100% crossbrowser compatible) and manipulating table rows is a bit out of control...

Nick · Accepted Answer · 2019-02-20 19:44:43Z

0

This property has had many issues with almost every browser, as you can see here.

I tried the -moz flag found here for this property and it did not work, so I don't believe there is a workaround to this issue at the moment. To ensure it works for all users, I would use the table columns property or use something like CSS Grid.

edited Feb 20, 2019 at 19:44

answered Feb 20, 2019 at 19:39

Nick

1,4421 gold badge15 silver badges20 bronze badges

2 Comments

Mikel Wohlschlegel Over a year ago

I had a flex grid before and still have one for desktop view. But as far as I know, the column simulation does not work for my use case (fill columns from top to bottom and start over from right to left column when page breaks in print view)

Nick Over a year ago

Unfortunately, HTML tables are not very friendly when it comes to styling, which is why most people create "div tables." You could use flexbox to accomplish something like this. Use flex wrap to have the remaining content go to the second column. Here is a good guideline to start with: dev.to/drews256/…

Collectives™ on Stack Overflow

Split table into css columns, issue in Firefox

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related