将方向更改为垂直，表格行 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 做到这一点？

Answer 1

如果你被迫只能使用 CSS，你可以使用旋转:)

#table {
    transform:rotate(90deg);  
}
#table th, #table td{
    transform:rotate(-90deg);
}
td {
  height: 50px;
}

<table id="table">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
        <tr><th>row3</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
    </tbody>
</table>

Answer 2

这可能不是您期望的解决方案，我真的鼓励您查看新的 CSS 灵活盒模型，而不是使用 HTML 表格，因为它会让您在此类场景中的生活更加轻松。

如果您有兴趣，请查看我在Vertical Menu (+ Sub-Menu) stacks unnatural中对非常类似问题的回答。