javascript - HTML 表格标题中的垂直（旋转）文本

Question

我的表头比表中的数据宽得多，所以我试图旋转表头中的文本以节省空间。

我一直在尝试这个问题中的建议，我也看过这个和这个。

但是，似乎没有一个答案真正起作用：这是我在JSFiddle中的尝试。

---

文本可以旋转，但<th>元素无法正确调整大小，这是尝试旋转文本的重点。

自从提出这些问题以来已经有 2-4 年了，是否有任何新的解决方案来解决这个问题？

Answer 1

您可以使用 CSS 来选择相应thead的行并调整其大小：

演示：http: //jsfiddle.net/uo44ub6L/

CSS：

thead th {
    height: 130px;
}

另一种方法是使用rowspan="5"创建一个更大的th但你需要添加一些空白行，你会得到相同的效果。要么工作。

如果您需要动态执行此操作，您可以使用 javascript 来选择th并调整跨度长度和字体大小的大小。

Answer 2

您可以使用

writing-mode: vertical-rl; text-orientation: mixed;

这将为您完成工作，这是它的JSFiddle。

Answer 3

现在，无需您在尝试中使用的任何浏览器特定转换即可实现这一点。请注意，从 2022 年开始需要换行跨度，以便让 firefox 将旋转的文本置于列中的中心（webkit 默认情况下会这样做）。我还建议您将文本旋转一个小角度，如此处所示，因为它（恕我直言）使其更易于阅读。

<style type="text/css">
  #myTable td {
    text-align: right;
  }
  
  th.r span {
    transform: rotate(185deg);
    writing-mode: vertical-lr;
  }
</style>

<table id="myTable" border="1" cellpadding="2" style="border-collapse:collapse;">
  <tr>
    <th class='r'><span>Display</span></th>
    <th class='r'><span>Year made (TV?)</span></th>
    <th class='r'><span>Native Res</span></th>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);">Dell U2410 (game) </td>
    <td>2010</td>
    <td>1080p</td>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);">Dell U2410 (sRGB)</td>
    <td>2010</td>
    <td>1080p</td>
  </tr>
  <tr>
    <td style="color:rgb(17, 85, 204);"> Sony 40VL130 (game)</td>
    <td style="color:rgb(0, 0, 255);">2008</td>
    <td>1080p</td>
  </tr>
</table>