时间戳

首页 > 解决方案 > 带有 HTML 和 CSS 的垂直表格标题

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

问题描述

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

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

通过一个简单的示例链接到我的代码笔，以说明我正在尝试实现的目标。我希望第二个标题不与下面的行重叠，并且整个标题的高度扩大以适应它。

可以在上面的 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 属性。所以我认为这个问题足够不同，不应该被认为是重复的。

标签： htmlcss

解决方案

结合使用我的原始解决方案和@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 解决方案：链接。

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

推荐阅读