html - CSS Rotate and Vertical Align within a TD -

html - CSS Rotate and Vertical Align within a TD -

i have next css code:

td{width:50px;-webkit-transform:rotate(270deg);}

this rotates text run vertically bottom top, need.

however, align text bottom of td.

i've tried using vertical-align:bottom; no joy, tried text-align:left; again, no joy.

any advice welcomed!

http://jsfiddle.net/74cmg/5/

here 1 way of doing.

modify html wrapping labels in div:

<table> <tbody> <tr class="header"> <th class="question"><div>question</div></th> <th><div>current</div></th> <th><div>previous</div></th> </tr> </tbody> </table>

for css, utilize following:

class="lang-css prettyprint-override">table { display: block; width:285mm; height:199mm; font-size:10pt; border:1px solid black; overflow:hidden; max-width:287mm; max-height:300mm; border-spacing:0px; border-collapse:collapse; } th { border: 1px dotted blue; vertical-align: bottom; } th div { transform:rotate(270deg); border: 1px dotted gray; position: relative; width: 80px; bottom: 30px; text-align: left; } tr.header { height:125px; border:1px solid black; }

instead of rotating th, rotate div within th. need adjust bottom offset on div align label bottom border of table header cell. not perfect offers hope.

see demo at: http://jsfiddle.net/audetwebdesign/ycvua/

html css