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

Question

我想使用 CSS 转换属性将旋转后的文本显示为表格标题。标题行应根据需要调整其高度，但旋转的文本只是溢出：

演示小提琴

我的问题是，如何让表头根据需要增长？本质上它应该是这样的：

原文由 Tim Büthe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你使用伪元素和垂直填充，你基本上可以画一个方框或 <td> ：http: //jsfiddle.net/qjzwG/319/

 .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;
}

如果您想保持 <td> 宽度较小， table-layout:fixed + width 可能会有所帮助。 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
}

如果您希望表格仍然能够从其内容中增长，但不能从 <th> 的宽度增长，则使用与文档的目录/方向相反的具有巨大负边距的包装器可能会这样做： 显然，最接近您的需要， 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;
}

来自 demo 和 base 的 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)：http: //msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我创建了类似的东西，我需要文本垂直对齐但没有旋转，我使用以下 CSS 属性做到了：

 writing-mode: vertical-lr;
text-orientation: upright;

请参见下面的示例：

 thead {
  background-color: black;
  color: white;
}
tbody tr td:nth-child(1) {
  text-align: center;
}
.vertical {
  writing-mode: vertical-lr;
    text-orientation: upright;
  background-color: silver;
  font-weight: bold;
}

 <table width="100%">
  <thead>
    <th>Week</th>
    <th colspan="2">Content</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td rowspan="3" class="vertical">BASICS</td>
      <td>Topic 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Topic 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Topic 3</td>
    </tr>
  </tbody>
</table>

原文由 Jonathan Arias 发布，翻译遵循 CC BY-SA 4.0 许可协议