创建HTML表格，垂直方向的文本作为表格标题

我想创建一个垂直书写文本作为标题的HTML表格（即标题文本旋转90度）。我现在用的是flollowing风格创建HTML表格，垂直方向的文本作为表格标题

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left" id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

在微软IE浏览器的9.x是显示正常。在Firefox和Chrome中，标题似乎浮在表格的顶部，与表格下方的表格重叠。有人可以帮忙吗？我简单不知道为什么会发生这种情况。我开始了这个教程：http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA，塔马斯

来源

2012-02-24 user1054310

我不相信你可以得到<th>的高度旋转它的单独CSS内容时改变。以下是我如何用一点jQuery来做到这一点。

http://jsfiddle.net/tsYRQ/1004/

来源

2012-02-24 17:14:58 deefour

不能与Safari的工作，我不管理，使列薄。 – gamov 2012-04-27 11:52:15

这[[fiddle fork]（http://jsfiddle.net/p2FEY/）将适用于Firefox（-moz-transform），并且将头部的宽度缩小到适当的大小。 – 2014-01-09 16:45:39

不适用于Firefox 46 – dude 2016-02-04 13:33:19

从http://blog.petermares.com/2010/10/27/vertical-text-in-html-table-headers-for-webkitmozilla-browsers-without-using-images/

使用CSS来旋转元件（例如<div>）一<td>元素中导致列宽度缩小到只容纳旋转的文本 - 但是该行的高度不会增长如所须。

适用于Mac和Mac上的Safari（至少适用于我）。

<html> 
    <head> 
     <style> 
      th 
      { 
       background-color: grey; 
       color: white; 
       text-align: center; 
       vertical-align: bottom; 
       height: 150px; 
       padding-bottom: 3px; 
       padding-left: 5px; 
       padding-right: 5px; 
      } 

      .verticalText 
      { 
       text-align: center; 
       vertical-align: middle; 
       width: 20px; 
       margin: 0px; 
       padding: 0px; 
       padding-left: 3px; 
       padding-right: 3px; 
       padding-top: 10px; 
       white-space: nowrap; 
       -webkit-transform: rotate(-90deg); 
       -moz-transform: rotate(-90deg);     
      }; 
     </style> 
    </head> 
    <body> 

     <table> 
      <tr> 
       <th>Column 1</th> 
       <th><div class="verticalText">Column 2</div></th> 
       <th>Column 3</th> 
       <th><div class="verticalText">Column 4</div></th> 
       <th>Column 5</th> 
       <th><div class="verticalText">Column 6</div></th> 
       <th>Column 7</th> 
       <th><div class="verticalText">Column 8</div></th> 
       <th>Column 9</th> 
      </tr> 
      <tr> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
      </tr> 
      <tr> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
      </tr> 
     </table> 

    </body> 
</html>

来源

2013-03-26 12:16:43 SimonD

与此相关的问题是，你正在''150px''th'风格上设置一个静态高度。查看所有额外的空格，甚至在垂直文本列的上方：http://jsfiddle.net/2xP5C/这就是为什么我更喜欢使用jQuery，因为它会将高度设置得与所需的高度相匹配最长的文本位。 – deefour 2013-03-26 15:46:08

你是对的 - 我错误地认为行高正在调整，但我只是不小心！看起来像两个答案的混合可以给出最好的结果...？ – SimonD 2013-03-26 16:08:12

我觉得还有一个更简单的方式来获得在表格单元格中垂直文本：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test</title> 
    <style> 
     td { 
     text-align: center; 
     } 
     /*Creation of vertical text in cell*/ 
     .vertical_Text { 

       display: block; 
       color: #f00; 

       -webkit-transform: rotate(-90deg); 
       -moz-transform: rotate(-90deg);     
      }; 
    </style> 
</head> 
<body> 
<table border="1" cellspacing="10" cellpadding="20"> 
    <thead> 
     <tr> 
      <!-- vertical cell --> 
      <td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td> 
      <td>header1-2</td> 
      <td colspan="3">header1-2</td> 
     </tr> 

     <tr> 
      <td>header2-1</td> 
      <td>header2-2</td> 
      <td>header2-3</td> 
      <td>header2-4</td> 
     </tr> 

    </thead> 
    <tbody> 

     <!-- tr*5>td{data-$/$$}*5 --> 
     <tr> 
      <!-- vertical cell --> 
      <td rowspan="5"><span class="vertical_Text" title="vertical text">DATA</span></td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

来源

2017-01-13 14:44:55 greg

仅适用于显示示例中的数据，但较长的标题代替HEAD破坏的表格，teble – 2017-11-04 20:44:58

创建HTML表格，垂直方向的文本作为表格标题

回答

相关问题