请引用fiddle代码: 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(类为“extra”)中，将 放入 td，获得绝对位置和水平位置和垂直居中。我还必须定义一个固定宽度，否则文本会分成两行。除此之外，我从 .tdInfo 中删除了 transform-origin: 20px; 以允许居中，如下所示:
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;
}
关于html - 如何删除垂直旋转文本上方的 html 表格单元格内的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37418166/