html - CSS 转置 HTML（行到列）

Question

如何将 HTML 行转换为列？

我找到了几种方法，但未能在表格中保持正确的顺序。

这是HTML和CSS：

#t01 {
  background-color: lightgoldenrodyellow
}

<table id="t01">
  <thead>
    <tr>
      <th>MultipleChoice : </th>
      <th>FreeTextQuestin:</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Option_1</td>
      <td>my answer</td>
    </tr>
  </tbody>
</table>

它看起来像这样： 当前样式

我想有这样的： mainTarget

行数是动态的，我只想使用 CSS。提前致谢！

标签： htmlcssrowstranspose

Answer 1

您的问题有几个答案，您可以使用css grid 属性

或者你可以这样做：

<table id="t01">
    <tbody>
        <tr>
            <th>MultipleChoice : </th>
            <td>Option_1</td>
        </tr>
        <tr>
            <th>FreeTextQuestin: </th>
            <td>My answer </td>
        </tr>
    </tbody>
</table>