Html 如何在具有自动高度/无文本溢出的表格标题中显示垂直文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6997631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display vertical text in table headers with auto height / without text overflow?
提问by Tim Büthe
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:
我想使用 CSS 变换属性将旋转文本显示为表格标题。标题行应根据需要调整其高度，但旋转后的文本会溢出：
My question is, how to get the table header to grow as needed? Essentially it should look like this:
我的问题是，如何让表头根据需要增长？基本上它应该是这样的：
采纳答案by G-Cyrillus
If you use a pseudo element and vertical-padding, you may basicly draw a square box or <td>:
http://jsfiddle.net/qjzwG/319/
如果您使用伪元素和垂直填充，您基本上可以绘制一个方形框或<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+ widthmight help.
http://jsfiddle.net/qjzwG/320/
如果您想保持<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
}
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/
如果您希望表格仍然能够从它的内容而不是从 的宽度增长，则<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;
}
HTML from demo and base :
来自 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>
For older IE , you need to use writing-mode (CSS) :http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx
对于较旧的 IE，您需要使用写作模式 (CSS)：http: //msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx
回答by dmitry_romanov
There are new (experimental) CSS3 feature which does what exactly that: writing-mode.
有新的（实验性的）CSS3 功能可以做到这一点：writing-mode。
You have to apply it on a div inside the table cell:
您必须将其应用于表格单元格内的 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>Thanks to @gman - it works in Firefox but not in Chrome. One can wrap the content of thin divto have the vertical text in Chrome js-fiddle demobut it feels like a kludge.
感谢@gman - 它适用于 Firefox，但不适用于 Chrome。在 Chrome js-fiddle 演示th中div，可以将in的内容包装起来以获得垂直文本，但感觉像是杂乱无章。
回答by alnassre
use
用
writing-mode: vertical-lr;
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
回答by Joseph Marikle
well... I know this is not the best solution but you can correct it with client side javascript. In jQuery it would look like this:
嗯...我知道这不是最好的解决方案，但您可以使用客户端 javascript 更正它。在 jQuery 中，它看起来像这样：
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})
as for a pure HTML or CSS solution, I think this is a browser limitation.
至于纯 HTML 或 CSS 解决方案，我认为这是浏览器的限制。
回答by ashleedawg
I struggled to get my <th>'s aligned exactly how I wanted them (even if some are multiple lines).
This is what worked for me:
我努力让我的<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>I figured I'd share, partly as reference for "future me".
我想我会分享，部分是作为“未来的我”的参考。
回答by kmxr
I had a hard time getting these tweaks to work in a consistent manner. Just in case this helps someone, my solution was to create images of vertical text.
我很难让这些调整以一致的方式工作。以防万一这对某人有帮助，我的解决方案是创建垂直文本的图像。
