您可以使用 CSS 按宽度或列数“换行”表格吗？答案

【问题标题】：Can you "line-break" a table using CSS by width or number of columns?您可以使用 CSS 按宽度或列数“换行”表格吗？
【发布时间】：2019-10-13 22:29:32
【问题描述】：

我有一个 HTML 表格，它有 17 列，超过 2 个标题行和 1 个正文行。在大多数桌面视图中，此表格非常适合我的设计，但在小屏幕上，表格悬垂在其父元素上，并创建了大量的水平滚动。

我想知道 CSS/HTML/JS 中是否有办法捕捉超过一定宽度的表格，或计算列数（或任何其他明智的做法），并导致它“中断”换行，就像在段落中添加换行符一样。我想以编程方式捕捉到这一点（而不是仅仅将表重写为多个表），因为如果没有这种假设的列换行符，大屏幕体验会大大提高。

理想情况下，我想保留表格单元格等的 css 定义（例如，不只是制作所有内容 display: block 并完成它）。

为了增加复杂性，顶行中的一些标题单元格跨越两列。我希望能找到一个解决方案，既不破坏这些单元格，又不破坏单元格中的文本，或者在中断后将单元格中的文本复制到两列。

这一切都在 Foundation 6 框架内，如果那里有我错过的任何工具的话。我尝试使用 Foundation 的 <table class="stack">，但它不起作用 - 它只显示正文行，我认为是因为某些标题单元格跨越多个列。

【问题讨论】：

Responsive tables, the smart way 的任何答案都有帮助吗？
好喊@MrLister，我会和他们一起玩，看看我是否能实现我所追求的。谢谢。

标签： html css html-table

【解决方案1】：

您可以尝试将css-grid 与媒体查询一起使用

Example

HTML
<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
 <li>F</li>
</ul>

CSS
ul {
 display: grid;
 grid-template-columns: 140px 140px 140px 140px;
 grid-gap: 10px;
}

@media only screen and (max-width: 800px) {
 ul {
  grid-template-columns: 200px 200px;
 }

}

【讨论】：

【解决方案2】：

经过更多研究，我发现没有“正确”的方法可以做我想做的事。就我而言，视觉上实现所需结果的最简单方法是让每列/列对自己的表格，然后让这些表格显示为块并浮动到左侧。这在语义上不是很好（每个主要数据点的新表），但它是供小团队使用的内部工具，所以我不会花更多时间在这上面。

【讨论】：