请参阅小提琴代码:https : //jsfiddle.net/prtheei/207kvqtm/
如何删除“ VerticalText”和表的右页边距之间的空间。我只需要在表格右边的一小列,该列跨越5行并包含垂直旋转的文本。但是在旋转文本时,在文本和右边界之间会创建一个巨大的空间。
代码:
<html>
<head>
<meta charset="UTF-8">
<style>
table {
width: 900px;
border-collapse: collapse;
}
tr {
border: 1px black solid;
}
td {
border: 1px black solid;
width: 28%;
vertical-align: top;
padding: 8px;
}
.tdInfo {
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* Safari/Chrome */
-webkit-transform-origin: 20px;
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin: 20px;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: 20px;
-ms-transform: rotate(90deg); /* IE 9 */
-ms-transform-origin: 20px;
transform-origin
}
.tdTime {
width: 10%;
vertical-align: top;
font-weight:bold;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tdTime">09:30</td>
<td colspan="4"><center>Row1</center></td>
</tr>
<tr>
<td class="tdTime">10:30</td>
<td colspan="3"><center>Row2</center></td>
<td class="tdInfo" rowspan="5">VerticalText</td>
</tr>
<tr>
<td class="tdTime">11:30</td>
<td>Row3Col2</td>
<td>Row3Col3</td>
<td>Row3Col4</td>
</tr>
<tr>
<td class="tdTime">12:30</td>
<td>Row4Col2</td>
<td>Row4Col3</td>
<td>Row4Col4</td>
</tr>
<tr>
<td class="tdTime">13:30</td>
<td>Row5Col2</td>
<td>Row5Col3</td>
<td>Row5Col4</td>
</tr>
<tr>
<td class="tdTime">14:30</td>
<td colspan="3"><center>Row 6</center></td>
</tr>
</table>
</body>
</html>
我找到了一个解决方案,但是它稍微改变了您的HTML。它把在一个单独的该单元格的文本div
是我们把(带班的“额外”)到的td
,获取位置绝对加水平和垂直居中。我还必须定义一个固定的宽度,否则文本将分成两行。除此之外,我从中删除transform-origin: 20px;
了.tdInfo
以进行居中,如下所示:
https://jsfiddle.net/L420gybb/
这是更改的HTML部分:
这是更改和添加的CSS:
.tdInfo {
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* Safari/Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-ms-transform: rotate(90deg); /* IE 9 */
}
.extra {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
width: 120px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句