首先声明,我知道这个问题已经被问了很多次,但是没有一个答案适用于我。
大多数解决方案都指导使用transform:rotate(270deg);
,然而,这会影响宽度,因为块是以一种不考虑旋转的方式生成的,使块比所需的更宽。
我的目标是在表格中获得类似以下的东西:
我一直在尝试使用各种不同的CSS属性,但都没有成功。这是一个基本的沙盒 我一直在使用它,展示了我遇到的一些问题。
首先声明,我知道这个问题已经被问了很多次,但是没有一个答案适用于我。
大多数解决方案都指导使用transform:rotate(270deg);
,然而,这会影响宽度,因为块是以一种不考虑旋转的方式生成的,使块比所需的更宽。
我的目标是在表格中获得类似以下的东西:
我一直在尝试使用各种不同的CSS属性,但都没有成功。这是一个基本的沙盒 我一直在使用它,展示了我遇到的一些问题。
将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>
rotate
变换之外还包括transform-origin
。这里有一个演示: http://jsbin.com/isinoh/2/edit
<!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> </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>
由于字体渲染问题(当您不编写正常的水平文本时,提示无法帮助),在许多系统中旋转的文本绘制效果并不好看。
你可以使用canvas
元素手动渲染文本。在这种情况下,你也需要手动调整元素的宽度和高度。