Vertically Rotate Text Inside an HTML Table Header Cell

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

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

Creating HTML table with vertically oriented text as table header

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/

How can I properly rotate a text inside a table cell

You can use writing-mode: vertical-rl; combined with a scale transformation:

table {

  text-align: left;

  border-collapse: collapse;

}

td,

th {

  border: 1px solid lightgrey;

  padding: 0px 3px;

}

td:not(:first-child) {

  min-width: 140px;

}

.table_title_top {

  text-align: center;

}

.table_title_left {

  text-align: center;

  width: 35px;

}

.table_title_left div {

   writing-mode: vertical-rl;

   white-space:nowrap;

   transform:scale(-1);

}

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

</head>

<body>

  <table>

    <tbody>

      <tr>

        <td></td>

        <td colspan="100" class="table_title_top">

          <div>Title Top Title Top</div>

        </td>

      </tr>

      <tr class="calc-tr calc-tr-title">

        <td rowspan="100" class="table_title_left">

          <div>Title Left Title Left</div>

        </td>

        <td>0</td>

        <td>0</td>

        <td>0</td>

      </tr>

      <tr>

        <td>0</td>

        <td>0</td>

        <td>0</td>

      </tr>

      <tr>

        <td>0</td>

        <td>0</td>

        <td>0</td>

      </tr>

    </tbody>

  </table>

</body>

</html>

how to rotate text vertically at table column header

Rotate just the div not the table header.Each th line should look like: <th ><div class="rotate">Fisrt Number Second Number</div></th>

And adjust the rotate css code to:

.rotate {
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
      -ms-transform: rotate(-90.0deg);  /* IE9+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
          transform: rotate(-90.0deg);  /* Standard */
}

Here is an updated fiddle

Set vertical text correctly on table header cells

I have re-created this for you. Next time please include all the relevant HTML and CSS.

To get this to work:

Set the right min-width on the th to stop the headers from overlapping each other. It needs to be just large enough to contain the longest string of text that you will have in the headers.
Set the right max-width on the span to contain it inside the th. It should match the height of the th minus any padding.
You could change the min-width to be smaller on headers that contain less text, if you wanted, by attaching a class to the smaller headers and specifying a smaller min-width for them.

There doesn't seem to be any need to use javascript / jQuery.

Have an example!

Screenshot

CSS

th { 
    background: red; 
    height: 166px;
    min-width: 90px; 
    /* 
      min-width is large enough to stop 
      the longest header text you will have from 
      overlapping when the table is the smallest it will be 
    */
}

th span {
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-weight: normal;
    text-transform: uppercase;
    max-width: 156px;
    color: #FFF;
    /*
      max-width contains the span and 
      must match the height of the th minus 
      any padding you want 
    */
}

.shorty {
    min-width: 70px;
}

/* 
   You could give a class like this
   to your shorter headers if you wanted 
   maybe apply it with javascript or
   if you use PHP / whatever you could
   apply it to strings of a certain size.
*/

HTML

<table>
    <thead>
    <tr>
        <th><span>This is my really long text</span></th>
        <th class="shorty"><span>Shorty!</span></th>
        <th><span>This is my really long text</span></th>
        <th><span>This is my really long text</span></th>
        <th><span>This is my really long text</span></th>
    </tr>
    </thead>
</table>