Reduce TH width with "converted: rotated" content to avoid losing space

Question

I rotated the contents of TH to have a vertical side for my table. The effect can be seen here:

http://jsfiddle.net/vuCzZ/

Essentially rotation is done through this css:

th
{
    width:20px;
    vertical-align:middle;
}

th div
{
    transform:rotate(-90deg);
}

I would also like to narrow the width of the PM to avoid wasted space, but width:20pxit has no effect, the smaller the width of the word “Title” (I know that it transform:rotate()has only a “visual effect”, but the objects continue to fill the original space, something like concepts position:relative).

Please, how to reduce TH width to a minimum?

thank

Answer 1

EDIT: :

DEMO

CSS:

td, th {
    border:solid 1px red;
    vertical-align:middle;
}
th {
    width:1.6em;
}
th div {
    -webkit-transform:rotate(-90deg) translate(-50%, 0);
    transform:rotate(-90deg) translate(-50%, 0);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
    position:absolute;
}

---

position: absolute; transform-origin:

DEMO

CSS:

td, th {
    border:solid 1px red;
    vertical-align:middle;
}
th {
    width:20px;
    position:relative;
}
th div {
    position:absolute;
    bottom:-0.6em;
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
}

Answer 2

div, th. th :

th div
{
    width:20px;
    transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
}

(: , Google Chrome).

:

th div
{
    width:20px;
    transform:rotate(-90deg) translate(-20px,0);
    -webkit-transform:rotate(-90deg) translate(-20px,0);
}

, , , .