HTML表格垂直文本对齐方式

Question

目前在更复杂的桌面上遇到麻烦。

这是我必须达到的结果

垂直对齐是通过css旋转完成的：

 .vertical{
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
   transform: rotate(-90deg);
   height:150px;
  }

在这里，我在codepen中拥有当前状态： click here

Answer 1

尝试添加：

CWD

你的CSS中的

td.vertical {vertical-align: top;}

th{
    background-color: #6d3550;
    padding:5px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    color:#fff;
  }
  .vertical{
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    height:150px;

  }
  
  .dbl{
    height: 300px !important;
        
  }
td.vertical {vertical-align: top;}

Answer 2

通常，background-color属性根据框模型设置div的颜色。边距始终是透明的。所以，只需增加.vertical：

的填充

.vertical{
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
height:150px;
padding:15px;

}

详细了解方框模型here