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

Question

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

它按照应有的纯 HTML + CSS 显示。但是在使用 Bootstrap 4 表格时，如果其中一个单元格的内容增长并且表格行高增加，则垂直标题文本向右移动，朝向其他单元格，重叠内容。不使用 Bootstrap 时不会发生这种情况。

https://jsfiddle.net/onurmatik/y9tLk6dz/13/

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>

CSS

#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;
}

Answer 1

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

• 将“高”矩形（例如 1:2 比例）​​旋转 90deg 会产生一个“宽”矩形（例如 2:1 比例）。
• 应用于td 元素的转换将它们旋转到当前位置，而不会影响整个表格的宽度和高度。

This animation 应该更好地证明这一点。

我想即使没有 Bootstrap，只要复制 exact 相同的大小和比率，问题也会一样。

解决此问题的一种方法是将标题单元格的内容包装在 <span> 元素中：

<td class="vertical">
  <span>regularly</span>
</td>

...并将旋转和writing-mode 应用于<span> 元素：

.table .vertical {
  vertical-align: middle;
  text-align: right;
}

.table .vertical span {
  white-space: nowrap;
  writing-mode: vertical-lr;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

这里有一个live demo 供您快速参考。请注意，我在.table .vertical 选择器前面添加了.table 类以覆盖some of Bootstrap's default styles。