How to Control the Width of a Table Header Cell That Contains Rotated Text

How can I control the width of a table header cell that contains rotated text?

You need to apply position absolute to the div so it no longer occupies the horizontal space (the column will auto adjust to the width of the rest of the cells). Then a text-indent to reposition the element within the cell:

.rotate div {position: absolute;}

.rotate {

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    writing-mode: bt-rl;
    text-indent: -3em;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

http://jsfiddle.net/p4EPd/

Edit: fix for ie

.rotate div {
    -webkit-transform: rotate(-90deg) translate(0, 10px);
    -moz-transform: rotate(-90deg)  translate(0, 10px);
    writing-mode: bt-rl;
    padding: 0;
    margin: 0;
    height: 125px;
}

th.rotate {padding-top: 5px;}

http://jsfiddle.net/6Xjvm/

You can apply both through use of conditional comments.

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 could I rotate table header cells and automatically adjust to content size?

When you want to change the write direction of the text, you can use writing-mode. In this case I use writing-mode: vertical-lr;, which makes the text vertical, and the container height will change to fit the text. We also need to rotate the text in place, but in the future I would use sideways-lr, which lacks support now.

th {
  background-color: #ccc;
}

th,
td {
  border: 1px solid #000;
}

.rotate span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

<table cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th class="rotate">
        <span>Foo</span>
      </th>
      <th class="rotate">
        <span>Foo Bar Bazz</span>
      </th>
      <th class="rotate">
        <span>FooBar</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Foo collection
      </td>
      <td>
        Foo Bar Bazz collection
      </td>
      <td>
        Foo Bar collection
      </td>
    </tr>
  </tbody>
</table>

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

90 degree text rotation in a table

We can do some CSS tricks by warping headers text inside DIV's and applying some rules on th and the DIV's inside it, then we can get more styling ability then we can shorten the width of header even if text is long.

Some thing like: I hope it helps for you, Thanks

th, td, table{
  border:solid 1px;
}

div.vertical{
  position: absolute;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); /* Safari/Chrome */
  -moz-transform: rotate(-90deg);    /* Firefox */
  -o-transform: rotate(-90deg);      /* Opera */
  -ms-transform: rotate(-90deg);     /* IE 9 */
}

th.vertical{
  max-width: 50px;
  height: 85px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: inherit;
}

<table>
  <tr>
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
    <th class="risk-th" style="width: 4%">
      <!--Manuality-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Probability-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Gravity-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Mitigation-->
    </th>

    <th class="vertical"><div class="vertical">Manuality</div></th>
    <th class="vertical"><div class="vertical">Probability</div></th>
    <th class="vertical"><div class="vertical">Gravity</div></th>
    <th class="vertical"><div class="vertical">Mitigation</div></th>
  </tr>
</table>

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>

Rotate table header

Ah. The trick here is to put the header text in a <span> nested in a <div> (see this article):

th.rotated-text {    height: 140px;    white-space: nowrap;    padding: 0 !important;}
th.rotated-text > div {    transform:        translate(13px, 0px)        rotate(310deg);    width: 30px;}
th.rotated-text > div > span {    padding: 5px 10px;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>        <div class="row mt-4">        <div class="col-md-3"></div>        <div class="col-xs-12 col-md-6">            <table class="table table-hover">                <thead class="membership-tiers text-left">                <tr>                    <th scope="col"></th>                    <th class="rotated-text" scope="col"><div><span>View page 1</span></div></th>                    <th class="rotated-text" scope="col"><div><span>View page 2</span></div></th>                    <th class="rotated-text" scope="col"><div><span>Contact James</span></div></th>                    <th class="rotated-text" scope="col"><div><span>Contact Alan</span></div></th>                    <th class="rotated-text" scope="col"><div><span>View James' profile</span></div></th>                    <th class="rotated-text" scope="col"><div><span>View Alan's data</span></div></th>                    <th class="rotated-text" scope="col"><div><span>Edit page 1</span></div></th>                    <th class="rotated-text" scope="col"><div><span>Edit page 2</span></div></th>                    <th class="rotated-text" scope="col"><div><span>Delete page 1</span></div></th>                </tr>                </thead>                <tbody>                <tr>                    <th scope="row">James</th>                    <td>V</td>                    <td>X</td>                    <td>X</td>                    <td>X</td>                    <td>X</td>                    <td>X</td>                    <td>X</td>                    <td>V</td>                    <td>X</td>                </tr>                <tr>                    <th scope="row">Alan</th>                    <td>V</td>                    <td>V</td>                    <td>X</td>                    <td>X</td>                    <td>V</td>                    <td>X</td>                    <td>V</td>                    <td>V</td>                    <td>X</td>                </tr>                <tr>                    <th scope="row">Emma</th>                    <td>V</td>                    <td>V</td>                    <td>V</td>                    <td>V</td>                    <td>V</td>                    <td>V</td>                    <td>V</td>                    <td>V</td>                    <td>V</td>                </tr>                </tbody>            </table>        </div>        <div class="col-md-3"></div>    </div>