Bootstrap table：随着单元格内容的增加，垂直行 header 与单元格重叠

Question

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

它显示为普通 HTML + CSS 应该显示的样子。但是当使用 Bootstrap 4 tables 时，如果其中一个单元格的内容增长并且 table 行高增加，则垂直 header 文本向右移动，朝向其他单元格，重叠的内容。不使用 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 元素的变换，将它们在当前位置旋转，而不影响整个 table 的宽度和高度。

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

我想即使没有 Bootstrap，只要复制完全相同的尺寸和比例，问题也会一样。

解决此问题的一种方法是将 header 单元格的内容包装在 <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 for your quick reference. Please note that I've added the .table class in front of the .table .vertical selector to overwrite some of Bootstrap's default styles。

Bootstrap table：随着单元格内容的增加，垂直行 header 与单元格重叠

Bootstrap table: Vertical row header overlaps cells as cell content grow

css

html-table

vertical-alignment

bootstrap-4