将表拆分为 css 列，Firefox 中的问题答案

【问题标题】：Split table into css columns, issue in Firefox将表拆分为 css 列，Firefox 中的问题
【发布时间】：2019-02-22 06:18:06
【问题描述】：

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

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

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

您可以在 Chrome 中“运行 sn-p”以查看它的外观。 Firefox 将表格呈现在一行中。

原因：有一些长表格，在printview中应该分成两列布局。

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

【问题讨论】：

我很惊讶在任何地方都能听到这个作品。表格分为两列。
添加这个看看是否有效：-webkit-column-count: 2; /* Chrome、Safari、Opera */ -moz-column-count: 2;
浏览器前缀不能解决这个问题。

标签： html css css-multicolumn-layout

【解决方案1】：

对于 firefox，您还需要 打破表格布局显示 但是，它不再像 table 那样表现，列和行将不再匹配，并且不能使用rowspan 或colspan。

最简单的方法是将表格的元素重置为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

【讨论】：

这行得通。但无论如何，我决定说服客户不要使用这个解决方案，因为列（不是 100% 跨浏览器兼容）和操作表行之间的这种组合有点失控......

【解决方案2】：

这个属性在几乎所有浏览器中都有很多问题，你可以看到here。

我尝试了为该属性找到的 -moz 标志 here，但它不起作用，所以我认为目前没有解决此问题的方法。为了确保它适用于所有用户，我会使用 table columns 属性或使用 CSS Grid 之类的东西。

【讨论】：

我以前有一个弹性网格，现在还有一个用于桌面视图。但据我所知，列模拟不适用于我的用例（在打印视图中分页时从上到下填充列并从右到左重新开始）
不幸的是，HTML 表格在样式方面不是很友好，这就是大多数人创建“div 表格”的原因。你可以使用 flexbox 来完成这样的事情。使用 flex wrap 让剩余的内容进入第二列。这是一个很好的指南：dev.to/drews256/…