css - 如何移动表中的特定 td 元素

Question

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

我查看了 SO 和其他地方的帖子，但未能找到解决方案。这可能使用 css 吗？ This SO posts 是我找到的最接近的帖子，但它仍然无法按需工作。

有人可以指导我如何处理这个问题吗？

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>