将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>