How to Display Vertical Text in Table Headers with Auto Height/Without Text Overflow

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/

Vertical table headers with minimum width

You could safely use writing-mode nowdays http://jsfiddle.net/wh1jt3ox/

.verticalTableHeader span {
  display:inline-block;
  min-width:1em;
  text-align: center;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

<table border="1">
  <tr>
    <th class="verticalTableHeader">
      <span>0</span>
    </th>
    <th class="verticalTableHeader">
      <span>10</span>
    </th>
    <th class="verticalTableHeader">
      <span>100</span>
    </th>
    <th class="verticalTableHeader">
      <span>1 000</span>
    </th>
    <th class="verticalTableHeader">
      <span>10 000</span>
    </th>
    <th class="verticalTableHeader">
      <span>1 000 000</span>
    </th>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  </table>

body {
    font-family: Calibri;
    font-size: 10pt;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table th{
    overflow: hidden; /* Added This*/
}
table th, td {
    border: 1px #d3d3d3 solid;
    padding:2px;
}

table tbody tr:hover td {
    color: #000;
    background: #efefef;
}

.rowHeadings {
    background-color: gray;
}

.cellVerticalHeading p { /*Change Here*/
    /*text-align:center;*/
    white-space:nowrap;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    
}

.cellVerticalHeading p {/*Change Here*/
    display:inline-block;
    line-height: 5.2;
}

.cellVerticalHeading p:before{/*Change Here*/
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
}

.cellAssignment{
    text-align:center;
    vertical-align:middle;
}

@media print {
   thead {
       display: table-header-group;
   }

   /*table tbody tr td:before,
   table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }*/
}

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>