将表格行换行到下一行答案

【问题标题】：Wrap table row to the next line将表格行换行到下一行
【发布时间】：2021-05-09 19:43:10
【问题描述】：

<table id="table_id">
  <tr>
    <td>testtesttesttest</td>
    <td>testtesttesttest</td>
  </tr>
</table>

我想如果表格在屏幕上放不下，那么表格的第二个单元格会被转移到另一行下来吗？不是单元格中的文本，而是整个单元格。

【问题讨论】：

Possible duplicate of this question
@eggy 绝对不是。并非一切都是 jQuery。
@Keelan 现在，一切都是媒体查询。
@lolzerywowzery 对于可以用inline-block 解决的问题似乎有点过头了。

标签： html css

【解决方案1】：

将单元格更改为内联块：

#table_id {
  display: block;
}

#table_id td {
  display: inline-block;
}

td {
  background: green
}

<table id="table_id">
  <tr>
    <td>testtesttesttest</td>
    <td>testtesttesttest</td>
  </tr>
</table>

jsfiddle

【讨论】：

你是 CSS 大神！！每个其他答案都声称这是不可能的，但这有效。我的情况是我无法将表格更改为 div，因为它是由我不创作的插件生成的。
不错。有没有办法“包装”整个列，即当一个单元格在一行中换行时，也可以在其他行中换行相同的单元格？
@rustyx：（可能有点晚了，但是）对我有用的是在表格单元格上设置宽度（以 em 为单位，以便它随着用户缩放而缩放）。
这会包裹长行，但不会包裹短行，因此列不能正确排列。特别是，如果您有一行列标题，它们不会与其下方的数据列对齐。
添加vertical-align:top} 是必不可少的，否则您将无法模拟td，因为垂直对齐会失效。 niet 的回答显示了如何在没有表格标签的情况下执行此操作，但垂直对齐对于将 td 标签从表格单元格更改为内联块或块（如果中断为行）仍然很重要。

【解决方案2】：

在Jukka's answer 基础上改进。

HTML：

<table id="table_id">
<tr>
<td> testtesttesttest</td>
<td> testtesttesttest </td>
<td> testtesttesttest </td>
<td> testtesttesttest </td>
<td> testtesttesttest </td>
</tr>
<tr>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
<td> testtesttesttest</td>
</tr>
</table>

CSS：

#table_id  {display: block; }
#table_id  td {display: inline-block; border: 3px solid #FFFFFF;}
td { background: green;
     border: 3px solid #FFFFFF;} /* to show cell sizes */

访问http://jsfiddle.net/zjbyE/391

【讨论】：

【解决方案3】：

这不能用表格来完成，“行列”网格是固定的。

但是你可以使用inline-block 元素：

<div id="container">
    <div>testtesttesttest</div>
    <div>testtesttesttest</div>
</div>

CSS：

#container>div {display:inline-block;vertical-align:top}

【讨论】：