Question

我正在尝试创建一个表头，该表头是垂直的，并且没有明确的高度设置，目前仅使用HTML和CSS可以实现吗？

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

Link到我的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），即它们不支持将文本旋转270deg。

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

解决方案：首先将要样式化的标题文本嵌套在th内的div中，然后使用像这样的书写模式将文本垂直对齐：

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

这将为您提供帮助，如果您有任何其他问题，请随时与我联系以发表评论。谢谢

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

带有HTML和CSS的垂直表标题

3 个答案: