如何在具有自动高度/没有文本溢出的表格标题中显示垂直文本？

Question

我想使用CSS transform属性将旋转的文本显示为表格标题。标题行应根据需要调整其高度，但我的问题是，如何使表头根据需要增长？

Answer 1

如果您使用伪元素和垂直填充，则基本上可以画一个
方形框或 <td> :

.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform-origin:50% 50%;
    transform: rotate(90deg);

}
.verticalTableHeader:before {
    content:'';
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    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%;/* takes width as reference, + 10% for faking some extra padding */
    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 class="verticalTableHeader"><p>First</p></th>
      <th class="verticalTableHeader"><p>Second-long-header</p></th>
      <th class="verticalTableHeader"><p>Third</p></th>
    </tr>



.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform: rotate(90deg);
}
.verticalTableHeader p {
    margin:0 -999px;/* virtually reduce space needed on width to very little */
    display:inline-block;
}
.verticalTableHeader p:before {
    content:'';
    width:0;
    padding-top:110%;
    /* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
table {
    text-align:center;
}

来自演示和基础的HTML：

<table border="1">
    <tr>
      <th class="verticalTableHeader">First</th>
      <th class="verticalTableHeader">Second</th>
      <th class="verticalTableHeader">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）