4

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

大多数解决方案都指示使用transform:rotate(270deg);，但是，这会与宽度混淆，因为块的生成方式不考虑旋转，从而使块比期望的更宽。

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

期望的结果

我一直在玩各种不同的 CSS 属性，现在很幸运。这是我一直在使用的一个基本沙箱，它展示了我遇到的一些问题。

4

4 回答 4

4

修改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，我希望你会得到想要的结果。

小提琴

于 2012-12-30T12:44:30.463 回答
2

JSFiddle 似乎已关闭，所以我看不到您的代码——但也许transform-origin除了rotate转换之外您还应该包括在内。这是我的意思的演示：http: //jsbin.com/isinoh/2/edit

于 2012-12-30T00:01:36.350 回答
0

这里最困难的部分是将垂直文本与表格格式结合起来。参照。如何使用 CSS 跨浏览器绘制垂直文本？似乎您可能需要在每个标题单元格中的两个级别上进行额外标记，因为您需要定位（为了将旋转的内容从单元格中取出，以便它们未旋转的尺寸不会弄乱表格格式）并且表格单元格不需要' t 定位时表现良好。

例子：

<!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>

在许多系统中，结果不会很漂亮，因为字体渲染问题导致旋转的文本不能很好地绘制（当您不编写正常的水平文本时，提示无济于事）。

于 2012-12-30T09:17:25.400 回答
0

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

于 2012-12-29T23:12:57.537 回答