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>

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>

• html
• css
• firefox
• multiple-columns

• 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 Commented Apr 1 at 5:49
• 2 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 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 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 Commented Apr 1 at 9:53

1 Answer 1

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>