使用 CSS 将水平表格转换为垂直表格

Question

是否可以仅使用 CSS 将水平表格转换为垂直表格？

这是我所拥有的：

第一个标题单元格	第二个标题单元格	第三个标题单元格	第四个标题单元格
第一个数据单元	第二个数据单元	第三个数据单元	第四个数据单元

这就是我想要的：

第一个标题单元| 第一个数据单元

第二个标题单元| 第二个数据单元

第三个标题单元格| 第三个数据单元

第四个标题单元| 第四个数据单元

我的代码：

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

td, th {
  text-align: left;
  border: 1px solid #ddd;
  padding: 10px;
}

<table>
  <tbody>
    <tr>
      <th>1st header cell</th>
      <th>2nd header cell</th>
      <th>3rd header cell</th>
      <th>4th header cell</th>
    </tr>
    <tr>
      <td>1st data cell</td>
      <td>2nd data cell</td>
      <td>3rd data cell</td>
      <td>4th data cell</td>
    </tr>
  </tbody>
</table>

Answer 1

在不更改当前代码的情况下，您可以使用以下命令改变表格的方向：

table {
  display: flex;
  align-items: center;
  justify-content: center;
}
tbody {
    display: flex;
    flex-direction: row;
}
tr {
    display: flex;
    flex-direction: column;
}

要调整表格内容的居中位置，请调整上的align-items和。justify-contenttable