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?

Ethelethelbert

I am very surprised to hear this works anywhere at all. And the table is in two columns. – Strong

Add this and see if it works: -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; – Cobb

Browser prefixing does not solve this. – Ethelethelbert

Answer 1

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

Disbelieve

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

Answer 2

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.

Adellaadelle

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) – Ethelethelbert

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/… – Adellaadelle