htmlcssfirefoxmultiple-columns

css column-count fails on html table in Firefox

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>

Screenshot of Chrome Screenshot of Firefox

Solution

  • 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>