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

Question

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

演示小提琴

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

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>,使用带有与文档的dir/direction方向相反的hudge负边距的包装可能会做:显然,最接近你的需求,http:// jsfiddle达网络/ 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

Answer 2

用

writing-mode: vertical-lr;

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 3

尝试这个：

.vertical-header span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  max-height: 150px;
}

<table border=1>
  <tr>
    <th class="vertical-header"><span>Firstname</span></th>
    <th class="vertical-header"><span>Lastname</span></th>
    <th class="vertical-header"><span>Age</span></th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Answer 4

有新的(实验性的)CSS3功能可以完成这一功能:写入模式.

您必须将它应用于表格单元格内的div:

.vrt-header th {
  writing-mode: vertical-lr;
  min-width: 50px; /* for firefox */
}

<table class='vrt-header'>
  <thead>
    <tr>
      <th>First</th><th>Second</th><th>Third</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

感谢@gman - 它适用于Firefox但不适用于Chrome.一个可以包装的内容th中div有在Chrome的竖排文字JS-拨弄演示,但感觉就像一个杂牌.

Answer 5

我努力让我的<th>'s 完全按照我想要的方式对齐（即使有些是多行）。
这对我有用：

html    { font-family: Helvetica; }
table   { border-collapse: collapse; }
td, th  { border: 1px solid BurlyWood; }
td      { text-align: center; }
th      { background-color: NavajoWhite; 
          color: SaddleBrown; 
          width:50px;  
          vertical-align: bottom; }
th span { writing-mode: sideways-lr; /* +90°: use 'tb-rl' */
          text-align: left;          /* +90°: use 'right' */
          padding:10px 5px 0; }

<table>
    <tr>
      <th><span>First</span></th>
      <th><span>Second</span></th>
      <th><span>Third<br>Column</span></th>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
</table>

我想我会分享，部分是作为“未来的我”的参考。