将 table 拆分为 css 列，在 Firefox 中发布

Question

我有一个 table 应该分为两列（布局列，而不是 table 列）。

在所有主流浏览器中工作正常，除了 Firefox，它不会将 table 分成两列。

.column-layout {
  columns: 2;
}

<div class="column-layout">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

您可以 "run the snippet" 在 Chrome 中查看它应该是什么样子。 Firefox 在单行中呈现 table。

原因：有一些较长的table，应该在printview中分成两栏布局。

是否有学习 Firefox 如何将 table 分成多列的解决方法？

Answer 1

这个属性几乎所有浏览器都有很多问题，如您所见 here。

我为这个属性尝试了找到 here 的 -moz 标志，但它没有用，所以我认为目前没有解决此问题的方法。为了确保它适用于所有用户，我会使用 table 列属性或使用类似 CSS Grid.

Answer 2

对于 firefox，您还需要 破坏 table 布局显示 但是，它的行为不像 table，列和行将不再匹配，并且不再使用 rowspan 或 colspan。

最简单的方法是将 table 的元素重置为 display:block;。 （考虑 tbody，即使在 HTML 代码中丢失，浏览器也会生成它）.

.column-layout {
  columns: 2;
}


/* reset table-layout behavior of HTML table to allow here column-layout but loose the table-layout*/

.column-layout table,
.column-layout tbody,/* don't forget me, i'll be there */
.column-layout tr {
  display: block;
}

<div class="column-layout">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

pen to play with

将 table 拆分为 css 列，在 Firefox 中发布

Split table into css columns, issue in Firefox

html

css

css-multicolumn-layout