Menu
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
289
The first trick is to use writing-mode: vertical-lr to get the text to run vertically. By itself, the text runs top to bottom, but we want it to run bottom to top, so we spin it around it with the transform: rotate(180deg) .
The trick is to use display: inline-block; on the table rows and white-space: nowrap; on the table body.
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/
151
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
