9

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

Improve this question

4 Answers 4

Reset to default
16

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Doesn't work with Safari, I don't manage to make the columns thin.
This fiddle fork will work for Firefox (-moz-transform), and also reduces the width of the header to a proper size.
A lot has happened in the 3 years since this was first answered. Looks like the writing-mode style is now supported by FF and conflicts with the transform.
6

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>
Improve this answer

2 Comments

The issue with this is that you're setting a static height on the th style of 150px. Look at all the extra whitespace, even above your vertical-text columns: jsfiddle.net/2xP5C This is why I prefer using jQuery, since it will set the height to be only as tall as is needed to fit the longest bit of text.
You're right - I mistakenly thought the row height was adjusting but I was just being careless! Looks like a hybrid of the two answers could give the best result...?
2

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>
Improve this answer

1 Comment

Works just for data from showed example, but longer caption instead HEAD ruined table, fall of teble
0

simply you can do it with CSS

table th { writing-mode: vertical-rl; text-orientation: mixed; text-align: right; } 

<!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; text-align: right; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </body> </html>

Improve this answer

1 Comment

This unfortunately does not work with Safari (Desktop and iOS)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.