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

2019年7月21日 209次阅读

请参考小提琴代码：

https://jsfiddle.net/prtheei/207kvqtm/

如何删除“VerticalText”与表格右边距之间的空格.我想要的只是我的表右侧的一个小列,跨越5行并包含垂直旋转的文本.但是在旋转文本时,文本和右边距之间会创建一个巨大的空间.

Table View

码：

<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,获取位置绝对加上水平和垂直居中.我还必须定义一个固定的宽度,否则文本会分成两行.除此之外我删除了变换原点：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;
}
点赞