如果您使用伪元素和垂直填充，则基本上可以画一个
方形框或
<td>:
.verticalTableHeader { text-align:center; white-space:nowrap; transform-origin:50% 50%; transform: rotate(90deg);}.verticalTableHeader:before { content:''; padding-top:110%; display:inline-block; vertical-align:middle;}If you want to keep
<td>ith a small width,
table-layout:fixed+
width
might help. http://jsfiddle.net/qjzwG/320/
.verticalTableHeader { text-align:center; white-space:nowrap; transform: rotate(90deg);}.verticalTableHeader p { margin:0 -100% ; display:inline-block;}.verticalTableHeader p:before{ content:''; width:0; padding-top:110%; display:inline-block; vertical-align:middle;}table { text-align:center; table-layout : fixed; width:150px}If you want table to still be able to grow from it’s content but not from
width of
<th>, using a wrapper with a hudge negative margin opposite to
dir/direction of document might do : apparently, the closest to your needs
, http://jsfiddle.net/qjzwG/320/
<table border="1"> <tr> <th ><p>First</p></th> <th ><p>Second-long-header</p></th> <th ><p>Third</p></th> </tr>.verticalTableHeader { text-align:center; white-space:nowrap; transform: rotate(90deg);}.verticalTableHeader p { margin:0 -999px; display:inline-block;}.verticalTableHeader p:before { content:''; width:0; padding-top:110%; display:inline-block; vertical-align:middle;}table { text-align:center;}来自演示和基础的HTML：
<table border="1"> <tr> <th >First</th> <th >Second</th> <th >Third</th> </tr> <tr> <td>foo</td> <td>foo</td> <td>foo</td> </tr> <tr> <td>foo</td> <td>foo</td> <td>foo</td> </tr> <tr> <td>foo</td> <td>foo</td> <td>foo</td> </tr></table>
对于较旧的IE，您需要使用书写模式（CSS）
