Question

让我先说我知道这个问题已被充分询问，但没有一个答案对我有用。

大多数解决方案指示transform:rotate(270deg);的使用，但是，这会使宽度变得混乱，因为块的生成方式不考虑旋转，使块比所需的宽。

我的目标是获得以下内容（在表格中）：

Desired result

我一直在玩各种不同的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>

并添加小提琴中提供的CSS，我希望你能获得所需的结果。

FIDDLE

Answer 2

JSFiddle似乎已关闭，因此我无法看到您的代码 - 但除了transform-origin转换之外，您还应该包括rotate。这是我的意思演示：http://jsbin.com/isinoh/2/edit

Answer 3

您可以使用canvas元素手动渲染文本。在这种情况下，您还必须手动调整元素的宽度和高度。

Answer 4

这里最困难的部分是将垂直文本与表格格式相结合。参看到How can I draw vertical text with CSS cross-browser?似乎你可能需要在每个标题单元格的两个级别上额外加价，因为你需要定位（为了将旋转的内容从单元格中取出，这样它们的未旋转尺寸不会弄乱表格格式）和表格单元格在定位时表现不佳。

示例：

<!doctype html>
<style>
* { line-height: 1.3 }
table { border-collapse: collapse }
td, th
{
    border: 1px solid black;
    white-space: nowrap;
}
#title th
{
    width: 15px;
    height: 100px;
    vertical-align: bottom;
    font-weight: normal;
}
#title th > div {
   position: relative; 
}
#title th > div > div {
   position: absolute; 
   bottom: 0;
   -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
   -webkit-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   transform-origin: 0 100%;
   left: 1.1em;
}
</style>
<table>
    <tr id="title">
        <th>&nbsp;</th>
        <th><div><div>Column 1</div></div></th>
        <th><div><div>Column 2</div></div></th>
        <th><div><div>Column 3</div></div></th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
     <tr>
        <td>Row 2</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

在许多系统中，结果不会很漂亮，因为由于字体渲染问题而无法很好地绘制旋转文本（当您不编写普通水平文本时，提示无法提供帮助）。

网页上的垂直文本

4 个答案: