css column-count fails on html table in Firefox

Question

The following code works on most browsers, but fails on Firefox, i.e. displays everything in one column. What do I do?

The bottom of this post contains 2 screenshots. The first is my code in Chrome, the second in Firefox version 136.0.3 (64-bit). Both are being run on my Windows 11 Home laptop.

But I tested the code on Firefox on a Mac desktop and got the same problem there.

Someone suggested the solution in the following post:

Split table into css columns, issue in Firefox

That solution does not help. It breaks the structure of the table completely. The td's are no longer displayed in 2 columns within the table.

<div style="column-count:2; ">
  <table>
    <tbody>
      <tr><td>1 Street</td><td>Smith</td></tr>
      <tr><td>2 Street</td><td>Jones</td></tr>
      <tr><td>3 Street</td><td>Smith</td></tr>
      <tr><td>4 Street</td><td>Jones</td></tr>
      <tr><td>5 Street</td><td>Smith</td></tr>
      <tr><td>6 Street</td><td>Jones</td></tr>
      <tr><td>7 Street</td><td>Smith</td></tr>
      <tr><td>8 Street</td><td>Jones</td></tr>
      <tr><td>9 Street</td><td>Smith</td></tr>
      <tr><td>10 Street</td><td>Jones</td></tr>
      <tr><td>11 Street</td><td>Smith</td></tr>
      <tr><td>12 Street</td><td>Jones</td></tr>
      <tr><td>13 Street</td><td>Smith</td></tr>
      <tr><td>14 Street</td><td>Jones</td></tr>
      <tr><td>15 Street</td><td>Smith</td></tr>
      <tr><td>16 Street</td><td>Jones</td></tr>
      <tr><td>17 Street</td><td>Smith</td></tr>
      <tr><td>18 Street</td><td>Jones</td></tr>
      <tr><td>19 Street</td><td>Smith</td></tr>
      <tr><td>20 Street</td><td>Jones</td></tr>
      <tr><td>21 Street</td><td>Smith</td></tr>
      <tr><td>22 Street</td><td>Jones</td></tr>
      <tr><td>23 Street</td><td>Smith</td></tr>
    </tbody>
  </table>
</div>

This question is similar to: Split table into css columns, issue in Firefox. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — tacoshy
– tacoshy, Commented Apr 1 at 5:49
The CSSWG spec says that column-count applies to blocks, except tables. Chrome applies it to tables, but that goes beyond the spec. I'd suggest grid layout. — Nanigashi
– Nanigashi, Commented Apr 1 at 6:12
The question is actually pretty much identical to mine, but the solution does not help, as explained in the Edit to my post. — oyvey
– oyvey, Commented Apr 1 at 6:12
What's the purpose of the data you're presenting? It looks like it should/could be a list - in which case use a list, not a table - but that may just be the demo data from the question. — David Thomas
– David Thomas, Commented Apr 1 at 9:53

Nanigashi · Accepted Answer · 2025-04-01 06:42:47Z

The CSSWG spec says that column-count applies to blocks, except tables. Chrome applies it to tables, but that goes beyond the spec.

I'd suggest grid layout. However, then you have to specify "column" widths, too, otherwise you lose the table-like layout of columns.

table {
  column-count: 2;
  display: block;
}
tbody {
  display: grid;
}
td:first-child {
  min-width: 5em;
}

<table>
  <tbody>
    <tr><td>1 Street</td><td>Smith</td></tr>
    <tr><td>2 Street</td><td>Jones</td></tr>
    <tr><td>3 Street</td><td>Smith</td></tr>
    <tr><td>4 Street</td><td>Jones</td></tr>
    <tr><td>5 Street</td><td>Smith</td></tr>
    <tr><td>6 Street</td><td>Jones</td></tr>
    <tr><td>7 Street</td><td>Smith</td></tr>
    <tr><td>8 Street</td><td>Jones</td></tr>
    <tr><td>9 Street</td><td>Smith</td></tr>
    <tr><td>10 Street</td><td>Jones</td></tr>
    <tr><td>11 Street</td><td>Smith</td></tr>
    <tr><td>12 Street</td><td>Jones</td></tr>
    <tr><td>13 Street</td><td>Smith</td></tr>
    <tr><td>14 Street</td><td>Jones</td></tr>
    <tr><td>15 Street</td><td>Smith</td></tr>
    <tr><td>16 Street</td><td>Jones</td></tr>
    <tr><td>17 Street</td><td>Smith</td></tr>
    <tr><td>18 Street</td><td>Jones</td></tr>
    <tr><td>19 Street</td><td>Smith</td></tr>
    <tr><td>20 Street</td><td>Jones</td></tr>
    <tr><td>21 Street</td><td>Smith</td></tr>
    <tr><td>22 Street</td><td>Jones</td></tr>
    <tr><td>23 Street</td><td>Smith</td></tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

css column-count fails on html table in Firefox

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related