带有 HTML 和 CSS 的垂直表格标题

Question

我正在尝试创建一个带有垂直标题且没有明确调整高度大小的表格，目前仅使用 HTML 和 CSS 是否可行？

我避免使用任何 JS，因为这个 HTML 是使用 Thymleaf 和 Spring 进行模板化的。我避免显式调整高度，因为这将设置多个具有不同标题的表格的样式，因此它们将具有不同的高度 - 否则它们上方会浪费空间，或者它们会被部分截断。

Link 给我的 codepen 一个简单的例子来说明我想要实现的目标。我希望第二个标题不与下面的行重叠，并希望整个标题的高度扩大以适应它。

可以在上面的 codepen 链接中找到代码：

<table>
  <thead>
    <tr>
      <th>First Heading</th>
      <th class="vertical">Second Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Typical cell</td>
      <td>Typical cell</td>
    </tr>
    <tr>
      <td>Typical Cell cell</td>
      <td>Typical Cell</td>
    </tr>
  </tbody>
</table>

.vertical {
  transform: rotate(-90deg);
}

编辑：这已被标记为重复，但链接的问题没有提到高度是一个问题，答案包括一个实际上现在已弃用的 CSS 属性。所以我认为这个问题足够不同，不应被视为重复。

Answer 1

结合使用我的原始解决方案和@pasan_jg 的答案，我找到了我正在寻找的解决方案！

问题：文本方向和写作模式似乎不支持从下到上阅读并从左到右中断的垂直方向文本（至少我的解决方案在 Chrome 中这样做，行不中断Firefox），即它们不支持将文本旋转 270 度。

另一种解决方案是使用变换将文本旋转 270 度，但这不会更新框的大小，因此除非您手动设置高度和宽度，否则它会重叠/截断，如果您正在使用这并不好对于可能包含不同长度标题的多个表格，使用相同的样式。

解决方案：首先将要设置样式的标题文本垂直嵌套到 th 内的 div 中，然后使用 write-mode 垂直对齐文本，如下所示：

thead tr th div, .vertical {
    writing-mode: vertical-rl;
}

这将调整盒子的大小，现在我们可以通过变换将此文本翻转 180 度，但盒子已经为它调整了大小，所以我们不需要手动设置高度或宽度，完成 css：

thead tr th div, .vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

Codepen 解决方案：link。

编辑：删除text-orientation: sideways，因为它似乎没有必要。

Answer 2

更改垂直类的 CSS，如下所述：

.vertical {
     writing-mode: vertical-lr;
     text-orientation: upright;
     display: block;
}

这将对您有所帮助，如果您有任何其他问题，请随时在 cmets 与我联系。 谢谢

Answer 3

这是你要找的吗？

.vertical {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
}

<table>
  <thead>
    <tr>
      <th>
        <div class="vertical">First Heading</div>
      </th>
      <th>
        <div class="vertical">Second Heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Typical cell</td>
      <td>Typical cell</td>
    </tr>
    <tr>
      <td>Typical Cell cell</td>
      <td>Typical Cell</td>
    </tr>
  </tbody>
</table>

了解更多关于text-orientation