如何避免HTML表格中指定tr元素后出现列断行？

问题描述 #

我有一个需要以2列布局展示的HTML表格，多数行是地址行，少数为街区行。希望避免在街区行之后出现列断行（比如示例中包含“B:”的.neighborhood行后不能出现列断行）。另外发现column-count属性在Firefox和Tor浏览器中被忽略（Chrome、Opera、Edge、Brave及安卓设备正常），添加-moz-column-count: 2; -webkit-column-count: 2;也无效，移到table元素上则所有浏览器都失效。

原代码示例 #

CSS #

#addresses {
  column-count: 2;
}

HTML #

<div id="addresses">
  <table>
    <tbody>
      <tr class="neighborhood"><td colspan="2">A:</td></tr>
      <tr class="address"><td>1 Street</td><td>Smith</td></tr>
      <tr class="address"><td>2 Street</td><td>Jones</td></tr>
      <tr class="address"><td>3 Street</td><td>Smith</td></tr>
      <tr class="address"><td>4 Street</td><td>Jones</td></tr>
      <tr class="address"><td>5 Street</td><td>Smith</td></tr>
      <tr class="address"><td>6 Street</td><td>Jones</td></tr>
      <tr class="address"><td>7 Street</td><td>Smith</td></tr>
      <tr class="address"><td>8 Street</td><td>Jones</td></tr>
      <tr class="address"><td>9 Street</td><td>Smith</td></tr>
      <tr class="address"><td>10 Street</td><td>Jones</td></tr>
      <tr class="address"><td>11 Street</td><td>Smith</td></tr>
      <tr class="neighborhood"><td colspan="2">B:</td></tr>
      <tr class="address"><td>12 Street</td><td>Jones</td></tr>
      <tr class="address"><td>13 Street</td><td>Smith</td></tr>
      <tr class="address"><td>14 Street</td><td>Jones</td></tr>
      <tr class="address"><td>15 Street</td><td>Smith</td></tr>
      <tr class="neighborhood"><td colspan="2">C:</td></tr>
      <tr class="address"><td>16 Street</td><td>Jones</td></tr>
      <tr class="address"><td>17 Street</td><td>Smith</td></tr>
      <tr class="address"><td>18 Street</td><td>Jones</td></tr>
      <tr class="address"><td>19 Street</td><td>Smith</td></tr>
      <tr class="address"><td>20 Street</td><td>Jones</td></tr>
      <tr class="address"><td>21 Street</td><td>Smith</td></tr>
      <tr class="address"><td>22 Street</td><td>Jones</td></tr>
      <tr class="address"><td>23 Street</td><td>Smith</td></tr>
    </tbody>
  </table>
</div>

解决方案 #

一、禁止街区行后列断行 #

给街区行添加break-after: avoid属性（配合前缀兼容旧版浏览器），阻止浏览器在该元素后进行列断行：

.neighborhood {
  break-after: avoid;
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
}

二、修复Firefox中column-count失效问题 #

Firefox对表格元素直接应用多列布局支持不佳，需调整结构：把每个街区组（街区行+对应地址行）包裹在<div class="neighborhood-group">中，对容器#addresses应用多列布局，同时给每个组添加break-inside: avoid防止组内被拆分。

修改后的CSS

#addresses {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

.neighborhood-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: table;
  width: 100%;
  margin-bottom: 8px; /* 可选：添加组间距 */
}

.neighborhood {
  background: #f0f0f0; /* 可选：区分街区行 */
}

修改后的HTML

<div id="addresses">
  <div class="neighborhood-group">
    <table>
      <tbody>
        <tr class="neighborhood"><td colspan="2">A:</td></tr>
        <tr class="address"><td>1 Street</td><td>Smith</td></tr>
        <tr class="address"><td>2 Street</td><td>Jones</td></tr>
        <tr class="address"><td>3 Street</td><td>Smith</td></tr>
        <tr class="address"><td>4 Street</td><td>Jones</td></tr>
        <tr class="address"><td>5 Street</td><td>Smith</td></tr>
        <tr class="address"><td>6 Street</td><td>Jones</td></tr>
        <tr class="address"><td>7 Street</td><td>Smith</td></tr>
        <tr class="address"><td>8 Street</td><td>Jones</td></tr>
        <tr class="address"><td>9 Street</td><td>Smith</td></tr>
        <tr class="address"><td>10 Street</td><td>Jones</td></tr>
        <tr class="address"><td>11 Street</td><td>Smith</td></tr>
      </tbody>
    </table>
  </div>

  <div class="neighborhood-group">
    <table>
      <tbody>
        <tr class="neighborhood"><td colspan="2">B:</td></tr>
        <tr class="address"><td>12 Street</td><td>Jones</td></tr>
        <tr class="address"><td>13 Street</td><td>Smith</td></tr>
        <tr class="address"><td>14 Street</td><td>Jones</td></tr>
        <tr class="address"><td>15 Street</td><td>Smith</td></tr>
      </tbody>
    </table>
  </div>

  <div class="neighborhood-group">
    <table>
      <tbody>
        <tr class="neighborhood"><td colspan="2">C:</td></tr>
        <tr class="address"><td>16 Street</td><td>Jones</td></tr>
        <tr class="address"><td>17 Street</td><td>Smith</td></tr>
        <tr class="address"><td>18 Street</td><td>Jones</td></tr>
        <tr class="address"><td>19 Street</td><td>Smith</td></tr>
        <tr class="address"><td>20 Street</td><td>Jones</td></tr>
        <tr class="address"><td>21 Street</td><td>Smith</td></tr>
        <tr class="address"><td>22 Street</td><td>Jones</td></tr>
        <tr class="address"><td>23 Street</td><td>Smith</td></tr>
      </tbody>
    </table>
  </div>
</div>

方案说明 #

1. 禁止列断行：break-after: avoid直接作用于街区行，确保其后面不会被拆分到下一列；
2. Firefox兼容：将每个街区组独立包裹，用break-inside: avoid保证组内内容不被拆分，同时display: table让子表格占满列宽，解决Firefox对表格多列布局的支持问题；
3. 前缀属性用于兼容旧版浏览器，确保覆盖范围更广。

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