html - 将 Thead 部分移动为第一列

Question

考虑以下 html

<table>
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>data 1.1</td>
        <td>data 1.2</td>
        <td>data 1.3</td>
    </tr>
    <tr>
        <td>data 2.1</td>
        <td>data 2.2</td>
        <td>data 2.3</td>
    </tr>
</tbody>

它呈现如下图:

是否可以只用css让之前的html渲染成下图这样？ (请注意指标)

Answer 1

如果你必须用 css 做这件事并且你不能改变你的 HTML 你可以用 Flexbox 来做。

table {
  display: flex;
}
thead tr, tbody tr {
  display: inline-flex;
  flex-direction: column;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data 1.1</td>
      <td>data 1.2</td>
      <td>data 1.3</td>
    </tr>
    <tr>
      <td>data 2.1</td>
      <td>data 2.2</td>
      <td>data 2.3</td>
    </tr>
  </tbody>