Question

我正在修改旧网站以支持移动屏幕分辨率（一个额外的固定@media宽度），并且需要将包含4列的宽表分成2列表。所以每行应该分成两行。我不能修改HTML，只能修改CSS。列是固定宽度，一切都是固定宽度。有没有办法调整表格样式来实现这一目标？制作td显示：“其他东西”或类似技术？

Answer 1

你可以使用自动换行

td {
     word-wrap:break-word;
}

或将表格的最大宽度设置为特定数量

table {
max-width:400px;
}

Answer 2

一个可行的解决方案是增加垂直间距，然后将细胞转换为适当的位置。

在以下演示中，将鼠标悬停在表格上以查看应用的效果

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: