Creating HTML table with vertically oriented text as table header text direction

as an old question, the is more like info or reminder about vertical margin or padding in% that takes parent ' s width As reference .

If you use a pseudo element and vertical-padding, your may basicly draw a square box or <td> : HTTP://JSFIDDLE.NET/QJZWG/3 19/

.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 is able to grow from it's content but not from width <th> of, using a wrapper with a hudge NE Gative margin opposite to dir/direction of document might does: apparently, the closest to your needs, HTTP://JSFI ddle.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, your need to use Writing-mode (CSS): http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

REF:

Http://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov

Creating HTML table with vertically oriented text as table header text direction