使用垂直方向的文本作为表格标题创建 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9434839/
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
Creating HTML table with vertically oriented text as table header
提问by user1054310
I would like to create a HTML table with vertically written text as header (i.e. header text is rotated 90 degrees). I am using the flollowing style
我想创建一个 HTML 表格，垂直书写的文本作为标题（即标题文本旋转 90 度）。我正在使用以下样式
<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left" id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
In MS IE 9.x is displays OK. In Firefox and Chrome the header seems to float over the top of the table, it overlaps with the table rows below it. can somebody please help? I simple have no idea why is this happening. I started out with this tutorial: http://scottgale.com/blog/css-vertical-text/2010/03/01/
在 MS IE 9.x 中显示 OK。在 Firefox 和 Chrome 中，标题似乎漂浮在表格的顶部，它与其下方的表格行重叠。有人可以帮忙吗？我不知道为什么会这样。我从本教程开始：http: //scottgale.com/blog/css-vertical-text/2010/03/01/
TIA, Tamas
TIA, 塔马斯
回答by deefour
I don't believe you can get the height of the <th>to change when rotating it's contents with CSS alone. Below is how I do this with a bit of jQuery.
我不相信<th>单独使用 CSS 旋转它的内容时，你不能改变它的高度。下面是我如何使用一些 jQuery 来做到这一点。
回答by SimonD
Using CSS to rotate an element (e.g. a <div>) within a <td>element causes the column width to shrink to just accomodate the rotated text - however the row height does not grow as needed.
使用 CSS 旋转元素<div>内的元素（例如 a ）<td>会导致列宽缩小以仅容纳旋转的文本 - 但是行高不会根据需要增长。
Works in Chrome and Safari on Mac (for me at least).
适用于 Mac 上的 Chrome 和 Safari（至少对我而言）。
<html>
<head>
<style>
th
{
background-color: grey;
color: white;
text-align: center;
vertical-align: bottom;
height: 150px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
}
.verticalText
{
text-align: center;
vertical-align: middle;
width: 20px;
margin: 0px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 10px;
white-space: nowrap;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
};
</style>
</head>
<body>
<table>
<tr>
<th>Column 1</th>
<th><div class="verticalText">Column 2</div></th>
<th>Column 3</th>
<th><div class="verticalText">Column 4</div></th>
<th>Column 5</th>
<th><div class="verticalText">Column 6</div></th>
<th>Column 7</th>
<th><div class="verticalText">Column 8</div></th>
<th>Column 9</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
回答by greg
I think there is an easier way to get vertical text in table cell:
我认为有一种更简单的方法可以在表格单元格中获取垂直文本：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
td {
text-align: center;
}
/*Creation of vertical text in cell*/
.vertical_Text {
display: block;
color: #f00;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
};
</style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20">
<thead>
<tr>
<!-- vertical cell -->
<td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td>
<td>header1-2</td>
<td colspan="3">header1-2</td>
</tr>
<tr>
<td>header2-1</td>
<td>header2-2</td>
<td>header2-3</td>
<td>header2-4</td>
</tr>
</thead>
<tbody>
<!-- tr*5>td{data-$/$$}*5 -->
<tr>
<!-- vertical cell -->
<td rowspan="5"><span class="vertical_Text" title="vertical text">DATA</span></td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</body>
</html>
