将方向更改为垂直的表格行 HTML CSS

Question

我有这张桌子：

 <table id="tabla">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td></tr>
        <tr><th>row3</th><td>cccc</td></tr>
        <figure><img src="image.png"/></figure></td></tr>
    </tbody>
</table>

这按行组织信息……但我想旋转它并按列显示……我希望这足以解释我想要的内容：

我现在如何拥有它：

 row1: aaaa
row2: bbbb
row3: cccc imag

我多么想要它：

  row1 | row2 | row3
 aaaa | bbbb | cccc
             | imag

我怎样才能用 CSS 做到这一点？

原文由 Sergio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的—上使用 display: flex tbody 并在你的表格行上设置一个均匀划分的 flex-basis 。

 body {
  font-size: 20px;
  font-family: monospace;
}
table {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
tbody {
  display: flex;
  width: 800px;
  position: relative;
  align-items: stretch;
  border: 1px solid black;

}
tr {
  flex-basis: 33.33333333%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 5px 10px;


}
tr + tr {
border-left: 1px solid black;
}

th, td {
  flex-basis: 100%;
  text-align: left;
  display: flex;
  padding: 2px;

}
th {
  font-weight: bold;
}

 <table id="tabla">
    <tbody>
        <tr>
          <th>row1</th>
          <td>aaaa</td>
        </tr>
        <tr>
          <th>row2</th>
          <td>bbbb</td>
        </tr>
        <tr>
          <th>row3</th>
          <td>cccc</td>
          <td>
            <figure>
              <img src="https://via.placeholder.com/150"/>
            </figure>
          </td>
        </tr>
    </tbody>
</table>

代码笔： https ://codepen.io/jeffdaley/pen/WmgNRb?editors=1100

边界可能会给您带来一些麻烦，但这应该会让您走上正轨。

原文由 jeffdaley 发布，翻译遵循 CC BY-SA 4.0 许可协议