Firefox中CSS column-count作用于HTML表格失效问题求助

问题原因 #

Firefox对表格元素在CSS多列布局（column-count）中的处理逻辑和Chrome不一致：表格作为完整的块级容器，不会被多列布局拆分，会直接撑满容器宽度，导致所有内容显示为一列。之前的方案之所以破坏表格结构，是因为它强制修改了表格元素的布局属性，导致<td>无法保持两列排列。

可行解决方案 #

方案1：手动拆分表格（最可靠，全浏览器兼容） #

把原表格拆成两个独立表格，放在一个两列布局的容器里，既能保留表格原生结构，又能实现分栏效果：

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
  <!-- 左栏表格 -->
  <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>
    </tbody>
  </table>
  <!-- 右栏表格 -->
  <table>
    <tbody>
      <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>

方案2：CSS Grid改造布局（无需拆分DOM） #

如果不想改动DOM结构，可以通过CSS Grid重新定义<tbody>的布局，让表格行自动填充到两列，同时保留<td>的两列结构：

<style>
  .grid-table-container {
    max-width: 100%;
  }
  .grid-table-container table {
    width: 100%;
    border-collapse: collapse;
  }
  .grid-table-container tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .grid-table-container tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #eee;
  }
  .grid-table-container td {
    padding: 8px;
    border-right: 1px solid #eee;
  }
  .grid-table-container td:last-child {
    border-right: none;
  }
</style>

<div class="grid-table-container">
  <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>

方案对比 #

• 方案1：完全保留表格原生语义和样式，适配所有浏览器，不会出现布局错乱；
• 方案2：无需拆分DOM，但需要自定义边框、间距样式，避免和原生表格样式冲突。

内容的提问来源于stack exchange，提问作者oyvey