html - 网页上的垂直文本

Question

首先让我说我知道这个问题已经被问了很多，但没有一个答案对我有用。

大多数解决方案指示使用 transform:rotate(270deg);，但是，这会扰乱宽度，因为 block 的生成方式没有考虑旋转，使得比预期更宽的 block 。

我的目标是获得如下内容(在表格中):

我一直在尝试各种不同的 CSS 属性，现在很幸运。 Here is a basic sandbox我一直在使用，这说明了我一直遇到的一些问题。

Answer 1

像这样修改th:

<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column 1</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Col 2</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column Two</div>
        </div>
    </div>
</th>

然后添加 Fiddle 中提供的 CSS，我希望你会得到想要的结果。

FIDDLE