Question

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

我想知道CSS / HTML / JS中是否有一种方法可以捕获超过一定宽度的表，或者计数多列（或其他可行的方法），然后使其“中断”换成新行，就像将换行符添加到段落中一样。我想以编程的方式捕捉到这一点（而不是仅仅将表重写为多个表），因为在没有这种假想的行中断的情况下，大屏幕体验会显着改善。

理想情况下，我想保留table-cell等的css定义（例如，不只是制作所有display: block并对其进行处理）。

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

这一切都在Foundation 6框架内，如果我缺少任何工具。我尝试使用Foundation的<table class="stack">，但是它不起作用-它只显示主体行，我想是因为某些标头单元格跨越多列。

Answer 1

您可以尝试在媒体查询中使用css-grid

More

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

}

Answer 2

经过更多的研究，我发现没有“适当”的方法可以完成我想做的事情。在我的情况下，视觉上获得期望结果的最简单方法是使每个列/列对成为自己的表，然后将这些表显示为块并向左浮动。从语义上来说，这不是一个好主意（每个主要数据点都有一个新表格），但是它是供内部团队使用的小型团队使用的工具，因此，我不会在此上花费更多时间。

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

2 个答案: