Rotate Text as Headers in a table (cross browser) [closed]
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
开发者_如何学编程
Closed 11 years ago.
This is not a question.
I just felt that after spending this much time figuring out how to do this I would hate myself if i didn't save it somewhere and I would be a lousy programmer if I didn't share what I had found. (Killing two birds with one stone here.)So here is the code for rotating text in a table to act as a header.
<html>
<head>
<!--[if IE]>
<style>
.rotate_text
{
writing-mode: tb-rl;
filter: flipH() flipV();
}
</style>
<![endif]-->
<!--[if !IE]><!-->
<style>
.rotate_text
{
-moz-transform:rotate(-90deg);
-moz-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top left;
-o-transform: rotate(-90deg);
-o-transform-origin: top left;
position:relative;
top:20px;
}
</style>
<!--<![endif]-->
<style>
table
{
border: 1px solid black;
table-layout: fixed;
width: 69px; /*Table width must be set or it wont resize the cells*/
}
th, td
{
border: 1px solid black;
width: 23px;
}
.rotated_cell
{
height:300px;
vertical-align:bottom
}
</style>
</head>
<body>
<table border='1'>
<tr>
<td class='rotated_cell'>
<div class='rotate_text'>Test1</div>
</td>
<td class='rotated_cell'>
<div class='rotate_text'>TEST2</div>
</td>
<td class='rotated_cell'>
<div class='rotate_text'>WOOOOOOOOOOOOOOOOHOOOOOO</div>
</td>
</tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>X</td></tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论