How to display vertical text in table headers with auto height / without text overflow?
HtmlCssHtml Problem Overview
I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows:
My question is, how to get the table header to grow as needed? Essentially it should look like this:
Html Solutions
Solution 1 - Html
If you use a pseudo element and vertical-padding, you may basicly draw a square box or <td>
:
http://jsfiddle.net/qjzwG/319/
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform-origin:50% 50%;
transform: rotate(90deg);
}
.verticalTableHeader:before {
content:'';
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
If you want to keep <td>
ith a small width, table-layout:fixed
+ width
might help.
http://jsfiddle.net/qjzwG/320/
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -100% ;
display:inline-block;
}
.verticalTableHeader p:before{
content:'';
width:0;
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
table-layout : fixed;
width:150px
}
If you want table to still be able to grow from it's content but not from width of <th>
, using a wrapper with a hudge negative margin opposite to dir/direction of document might do : apparently, the closest to your needs, http://jsfiddle.net/qjzwG/320/
<table border="1">
<tr>
<th class="verticalTableHeader"><p>First</p></th>
<th class="verticalTableHeader"><p>Second-long-header</p></th>
<th class="verticalTableHeader"><p>Third</p></th>
</tr>
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -999px;/* virtually reduce space needed on width to very little */
display:inline-block;
}
.verticalTableHeader p:before {
content:'';
width:0;
padding-top:110%;
/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
}
HTML from demo and base :
<table border="1">
<tr>
<th class="verticalTableHeader">First</th>
<th class="verticalTableHeader">Second</th>
<th class="verticalTableHeader">Third</th>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</table>
For older IE , you need to use writing-mode (CSS) :http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx
Solution 2 - Html
Solution 3 - Html
There are new (experimental) CSS3 feature which does what exactly that: [writing-mode] 1.
You have to apply it on a div inside the table cell:
.vrt-header th {
writing-mode: vertical-lr;
min-width: 50px; /* for firefox */
}
<table class='vrt-header'>
<thead>
<tr>
<th>First</th><th>Second</th><th>Third</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td><td>foo</td><td>foo</td>
</tr>
<tr>
<td>foo</td><td>foo</td><td>foo</td>
</tr>
<tr>
<td>foo</td><td>foo</td><td>foo</td>
</tr>
</tbody>
</table>
Thanks to @gman - it works in Firefox but not in Chrome. One can wrap the content of th
in div
to have the vertical text in Chrome js-fiddle demo but it feels like a kludge.
Solution 4 - Html
I struggled to get my <th>
's aligned exactly how I wanted them (even if some are multiple lines).
This is what worked for me:
html { font-family: Helvetica; }
table { border-collapse: collapse; }
td, th { border: 1px solid BurlyWood; }
td { text-align: center; }
th { background-color: NavajoWhite;
color: SaddleBrown;
width:50px;
vertical-align: bottom; }
th span { writing-mode: sideways-lr; /* +90°: use 'tb-rl' /
text-align: left; / +90°: use 'right' */
padding:10px 5px 0; }
First | Second | Third Column |
---|---|---|
foo | foo | foo |
foo | foo | foo |
I figured I'd share, partly as reference for "future me".
Solution 5 - Html
well... I know this is not the best solution but you can correct it with client side javascript. In jQuery it would look like this:
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})
as for a pure HTML or CSS solution, I think this is a browser limitation.
Solution 6 - Html
try this:
.vertical-header span {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: left;
max-height: 150px;
}
<table border=1>
<tr>
<th class="vertical-header"><span>Firstname</span></th>
<th class="vertical-header"><span>Lastname</span></th>
<th class="vertical-header"><span>Age</span></th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Solution 7 - Html
To avoid js using I can propose to use flex in first table row. A little messy with borders in headers, but it could be fixed in thin setup:
.header-row {
display: flex;
flex-direction: row;
}
span {
writing-mode: vertical-lr;
transform: rotate(180deg);
width: 23px;
border-left: 1px solid black;
}
table {
border: 1px solid black;
border-spacing: 0px;
}
td {
border: 1px solid black;
width: 20px;
}
<table>
<tr>
<td></td>
<td colspan="5" style="padding:0;border:none">
<div class="header-row">
<span>Header fsdafasd</span>
<span>Header fsda</span>
<span>Header fsdafa fsdaf</span>
<span>Header asdf</span>
<span>Header fsda</span>
</div>
</td>
</tr>
<tr>
<td>Test name fadsf</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Test name</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Test name</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
</table>
Solution 8 - Html
<thead><tr><th class="rotate"><div>header 1></div></th><th class="rotate"><div>header 2></div></th></tr></thead>
apply CSS to rotate class
th.rotate {
height: 110px; /* header height */
white-space: nowrap;
}
th.rotate > div {
transform:
translate(25px, 51px)
rotate(90deg);
/* rotate(315deg); for diagnol */
width: 30px;
margin-left: -35px;
margin-top: -30px;
}
Solution 9 - Html
This works for me
css
.v-text {
transform: rotate(270deg);
display: block;
}
html
<table>
<th>HEADER 1</th>
<th>
<p class="v-text">VERTICAL</p>
</th>
<table>
Solution 10 - Html
<style type="text/css">
.rotate > div {
text-align: center;
white-space:nowrap;
g-origin:50% 50%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg;
-ms-transform: rotate(-90deg;
-o-transform: rotate(-90deg;
transform: rotate(-90deg);
}
Solution 11 - Html
I had a hard time getting these tweaks to work in a consistent manner. Just in case this helps someone, my solution was to create images of vertical text.