如何去除垂直旋转文本上方HTML表格单元格内的空格

Question

如何去除垂直旋转文本上方HTML表格单元格内的空格

4

请参考以下代码：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>

- Preethi

4

最好将文本包装在一个div中，并旋转内部的div，而不是旋转<td>标签。旋转TD是危险的。 - Marcos Pérez Gude

1

暂时不要考虑你的90度转换，单元格将文本宽度作为最小宽度。 - rsn

@rsn - 我不知道这个。谢谢。看来我必须像 Johannes 回答的那样在 td 内部添加一个 div 来修改它。然后它就不会影响列的大小了。 - Preethi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johannes · Accepted Answer

我找到了一个解决方案，但它会稍微改变你的HTML。它将该单元格的文本放在一个单独的div（带有"class"extra"）中，该div被放置在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;
}