是否可以将 HTML 表格行分成多行？答案

【问题标题】：Is it possible to break HTML table row into multiple lines?是否可以将 HTML 表格行分成多行？
【发布时间】：2015-04-24 23:23:04
【问题描述】：

我正在修改一个旧网站以支持移动屏幕分辨率（一个额外的固定@media 宽度），并且需要将包含 4 列的宽表分解为 2 列表。所以每一行应该分成两行。我不能修改 HTML，只能修改 CSS。列是固定宽度，一切都是固定宽度。有没有办法调整表格样式来完成这个？让 td display:'something-other' 或类似技术？

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

你可以使用自动换行

td {
     word-wrap:break-word;
}

或将表格的最大宽度设置为某个数字

table {
max-width:400px;
}

【讨论】：

【解决方案2】：

一种可能的解决方案是增加垂直间距，然后将单元格变换到合适的位置。

在followinf演示中，悬停表格查看应用效果

table {
  border: solid 1px blue;
  font-size: 20px;
  transition: all 2s;
}

td {
  border: solid 1px green;
  width: 50px;
  transition: all 2s;
}

table:hover {
  border-spacing: 4px 31px;
}
table:hover td:nth-child(-n+2) {
  transform: translateY(-25px);
}

table:hover td:nth-child(n+3) {
  transform: translate(-116px,4px);
}

<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
</table>

但是，请注意表格尺寸错误。可能你会想要将它设置在一个隐藏溢出的容器中。

【讨论】：