Question

我有以下CSS代码：

td{width:50px;-webkit-transform:rotate(270deg);}

这会将文本从下到上垂直旋转，这就是我需要的。

但是，我想要做的是现在将文本与TD的底部对齐。

我尝试使用vertical-align:bottom;，但没有快乐，又尝试了text-align:left;，没有快乐。

欢迎任何建议！

http://jsfiddle.net/74cmg/5/

Answer 1

这是一种做法。

通过将标签包装在div：

中来修改HTML

<table>
    <tbody>
        <tr class="header">
            <th class="question"><div>Question</div></th>
            <th><div>Current</div></th>
            <th><div>Previous</div></th>
        </tr>
    </tbody>
</table>

对于CSS，请使用以下内容：

table {
    display: block;
    width:285mm;
    height:199mm;
    font-size:10pt;
    border:1px solid black;
    overflow:hidden;
    max-width:287mm;
    max-height:300mm;
    border-spacing:0px;
    border-collapse:collapse;
}
th {
    border: 1px dotted blue;
    vertical-align: bottom;
}
th div {
    transform:rotate(270deg);
    border: 1px dotted gray;
    position: relative;
    width: 80px;
    bottom: 30px;
    text-align: left;
}
tr.header {
    height:125px;
    border:1px solid black;
}

不要旋转th，而是在div内旋转th。您需要调整div上的底部偏移量，以使标签与表格标题单元格的底边对齐。这并不完美，但提供了一些希望。

请参阅演示：http://jsfiddle.net/audetwebdesign/yCVUa/

Answer 2

这是另一种方法：

HTML：

<table>
<tbody>
    <tr class="header">
        <td>Question</td>
    </tr>
    <tr>
        <td>Next</td>
    </tr>
    <tr>
        <td>Previous</td>
    </tr>
</tbody>

CSS：

table {
-webkit-transform:rotate(270deg);
border:1px solid #000;
margin:0 auto;/*you can use margins to compensate for the rotation */
width:100px
}

tr {
height:50px;
}

在此示例中，当您旋转表格时，“顶部”将从左侧运行，因此边距可以将其推出。

以下是演示：http://jsfiddle.net/alexwcoleman/cy9Yw/4/

CSS旋转和垂直在TD内对齐

2 个答案: