问题
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
<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/
TIA, Tamas
回答1:
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.
http://jsfiddle.net/tsYRQ/1004/
回答2:
From http://blog.petermares.com/2010/10/27/vertical-text-in-html-table-headers-for-webkitmozilla-browsers-without-using-images/
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.
Works in Chrome and Safari on Mac (for me at least).
<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>
回答3:
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>
来源:https://stackoverflow.com/questions/9434839/creating-html-table-with-vertically-oriented-text-as-table-header