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会这样做)。我还建议你以一个轻微的角度旋转文本，就像这里演示的那样(IMHO)使文本更容易阅读。

​

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

​