如何在表格中移动特定的td元素

Question

我具有以下表结构，但是我想将其更改为表结构。

我看过SO和其他地方的帖子，但找不到解决方案。使用CSS可以吗？ This SO帖子是我找到的最接近的帖子，但仍无法根据需要运行。

有人可以指导我如何处理吗？

Answer 1

您可以使用每行一张表格作为解决方法，使用CSS作为边框，如下所示：

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 4px;
  border: 1px solid #ccc;
  border-bottom: none;
}

table:last-of-type td {
  border-bottom: 1px solid #ccc;
}

<table>
  <tr>
    <td>Test Test Test Test Test Test</td>
    <td>Test Test</td>
    <td>Test Test Test Test</td>
  </tr>
</table>
<table>
  <tr>
    <td>Test Test</td>
    <td>Test Test Test Test</td>
    <td>Test Test Test Test Test Test Test</td>
  </tr>
</table>

Answer 2

使用flex可以使用align-items: stretch;

#container {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#container div {
  height: 30px;
  border: solid 1px black;
  margin: 5px;
}

<div id="container">
  <div style="width: 80px;"></div>
  <div style="width: 35px;"></div>
  <div style="width: 35px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>