如何在自动高度/无文本溢出的表格标题中显示垂直文本？ [英] How to display vertical text in table headers with auto height / without text overflow?

问题描述

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

  .verticalTableHeader {
 text-align：center; 
 white-space：nowrap; 
 transform-origin：50％50％; 
 transform：rotate（90deg）; 
 
} 
 .verticalTableHeader：before {
 content：''; 
 padding-top：110％; / *以宽度为参考，+ 10％用于伪造一些额外的填充* / 
 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％; / *以宽度为参考，+ 10％用于伪造一些额外的填充* / 
 display：inline-block; 
 vertical-align：middle; 
} 
 table {
 text-align：center; 
 table-layout：fixed; 
 width：150px 
} 
  

如果您希望表格仍然能够从< th> 的宽度开始使用具有与文档的dir /方向相反的空白负边距的包装器可能会：显然，最接近您的需求， http://jsfiddle.net/qjzwG/320/

 < table border =1> 
< tr> 
< th class =verticalTableHeader>< p>第一< / p>< / th> 
< th class =verticalTableHeader>< p>第二个长标头< / p>< / th> 
< th class =verticalTableHeader>< p>第三< / 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％; 
 / *以宽度为参考，+ 10％用于伪造一些额外的填充* / 
 display：inline-block; 
 vertical-align：middle; 
} 
 table {
 text-align：center; 
} 
  

演示和基础的HTML：

 < table border =1> 
< tr> 
< th class =verticalTableHeader>第一< / th> 
< th class =verticalTableHeader>第二< / th> 
< th class =verticalTableHeader>第三< / 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

I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows:

demo fiddle

My question is, how to get the table header to grow as needed? Essentially it should look like this:

解决方案

AS an old question, this is more like info or reminder about vertical margin or padding in % that takes parent's width as reference .

If you use a pseudo element and vertical-padding, you may basicly draw a square box or <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;
}

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 from demo and base :

<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>

For older IE , you need to use writing-mode (CSS) :http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

这篇关于如何在自动高度/无文本溢出的表格标题中显示垂直文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！