Results 1 to 2 of 2

Thread: Rotate Table Column Headers?

  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    1

    Rotate Table Column Headers?

    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?

  2. #2
    When you want to rotate something your going to need to do

    Code:
    <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)
    Code:
    .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(rotation=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
    Last edited by Disconnected; 07-29-2015 at 03:21 PM. Reason: Forgot to close table tag xD

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •