Css 引导表：随着单元格内容的增长，垂直行标题与单元格重叠

在每行的第一个单元格中，我有一个带有垂直对齐文本的标题单元格

它以普通HTML+CSS的方式显示。但是当使用Bootstrap 4表时，如果一个单元格的内容增加，并且表格行高度增加，垂直标题文本将向右移动，朝向其他单元格，重叠内容。不使用引导时不会发生这种情况

HTML

<table class="table table-borderless" id="grid">
  <tbody>
    <tr class="border-0">
      <td class="vertical">
        regularly
      </td>
      <td class="border">
        <ul class="list-group list-group-flush">
        </ul>
      </td>
      <td class="border">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Tua</li>
          <li class="list-group-item">Onur</li>
          <li class="list-group-item">Hanna</li>
          <li class="list-group-item">Sine</li>
          <li class="list-group-item">Fred</li>
          <li class="list-group-item">Anna</li>
          <li class="list-group-item">Floris</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td class="vertical">
        sometimes
      </td>
      <td class="border">
        <ul class="list-group list-group-flush"></ul>
      </td>
      <td class="border">
        <ul class="list-group list-group-flush"></ul>
      </td>
    </tr>
  </tbody>
</table>

---

只要单元的渲染高度大于其宽度，就会发生这种情况。这是因为：

• 将“高”矩形（例如1:2比率）旋转90度会产生“宽”矩形（例如2:1比率）
• 应用于

  td

  元素的转换会将它们旋转到当前位置，而不会影响整个表格的宽度和高度

应该更好地证明这一点

我想，即使没有引导，只要复制完全相同的大小和比率，问题也会是一样的

解决此问题的一种方法是将标题单元格的内容包装在

元素中：

有规律地

…并将旋转和

写入模式

应用于

元素：

.table.vertical{
垂直对齐：中间对齐；
文本对齐：右对齐；
}
.表.垂直跨度{
空白：nowrap；
书写方式：垂直lr；
变换原点：50%50%；
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}

---

这里有一个简单的例子供你快速参考。请注意，我已经在

.table.vertical

选择器前面添加了

.table

类以覆盖它。

感谢您的精彩解释和指导！

#grid li {
    width: 100%;
}
.vertical {
    text-align:center;
    vertical-align: bottom!important;
    white-space:nowrap;
    transform-origin:50% 50%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    writing-mode:tb-rl;
}
#grid td {
    width: 200px;
    height: 200px;
}