PDA

View Full Version : Rotate Table Column Headers?



bmartus
03-21-2015, 01:46 AM
Anybody know any tricks to get table column headers to be rotated 45 or 90 degrees? I've got long columne header titles, but the data is an integer (2-3 digits) and there's a lot of wasted space.

Any ideas?

Disconnected
07-29-2015, 03:20 PM
When you want to rotate something your going to need to do



<table>
<tr>
<td class="rotated_mate">rotate me mate</td>
</tr>
</table>


So you have your header now lets go and rotate the words to 45 degress (note this will be going counter-clockwise not clockwise)


.rotated_mate{

/* This will take care of safari */
-webkit-transform: rotate(-90deg);

/* This does firefox */
-moz-transform: rotate(-90deg);

/* New internet explorer browsers */
-ms-transform: rotate(-90deg);

/* This is for opera */
-o-transform: rotate(-90deg);

/* And this is for older IE browsers */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=1);

}


now the last one that has filter: in it your going to need to know 0 = 0 degrees, 1 = 90 degrees, 2 = 180 degrees and 3 is for 270 degrees

Or if you have tons of space why not put it in a col-md-3 or something like that