Html “你能”吗；换行“；按宽度或列数使用CSS的表？

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

我想知道在CSS/HTML/JS中是否有一种方法可以捕获一个超过一定宽度的表，或者计算一些列（或者任何其他合理的方法），并使其“打断”成一行，就像在段落中添加换行符一样。我希望通过编程（而不仅仅是将表重写为多个表）来了解这一点，因为如果没有这种假设的列换行，大屏幕体验会显著改善

理想情况下，我希望保留表格单元格等的css定义（如中所示，不只是让一切

display:block

并完成它）

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

<>这一切都在基础6框架内，如果有任何工具我错过了。我尝试使用Foundation的

，但它不起作用-它只显示正文行，我想这是因为一些标题单元格跨越多列。

您可以尝试与media query一起使用

HTML

A
B
C
D
E
F

CSS
保险商实验室{
显示：网格；
网格模板列：140px 140px 140px 140px；
栅隙：10px；
}
@仅介质屏幕和（最大宽度：800px）{
保险商实验室{
网格模板列：200px 200px；
}

---

}

做了更多的研究后，我发现没有“合适”的方法来做我想做的事情。在我的例子中，可视化地实现所需结果的最简单方法是使每个列/列对都有自己的表，然后使这些表显示为块并向左浮动。这在语义上不是很好（每个主要数据点都有一个新的表），但它是一个供小型团队使用的内部工具，因此我不会在这方面花费更多时间。

有什么答案可以帮助我吗？好的，大喊@MrLister，我将尝试一下，看看我是否能实现我的目标。谢谢

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;
 }