How to display vertical text in table headers with auto height / without text overflow?

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:

demo fiddle

My questio开发者_高级运维n is, how to get the table header to grow as needed? Essentially it should look like this:

---

use

writing-mode: vertical-lr;

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

---

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

---

There are new (experimental) CSS3 feature which does what exactly that: writing-mode.

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.

---

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; }

<table>
    <tr>
      <th><span>First</span></th>
      <th><span>Second</span></th>
      <th><span>Third<br>Column</span></th>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
</table>

I figured I'd share, partly as reference for "future me".