How to use CSS Rotate() in TH Table Tags


Tags: css,table,rotation

Problem :

I need some CSS guru assistance.

I am trying to create a simple html <table> where the column headers (<th> tags) have their text rotated 270 degrees to display sideways.

I am having trouble anchoring the header cells so the left-most part of the cell text aligns alone the bottom or baseline of all the <th> tags.

I have made many, many attempts a this and just cannot solve it via CSS.

Can anyone give me some ideas on how to acieve this?

See my jsfiddle at http://jsfiddle.net/franco13/t5GgE/

Thanks

This is what I want to achieve:

enter image description here



Solution :

http://jsfiddle.net/t5GgE/1/

Specify a transformation origin on point (65, 60) for the headers, with no wrap allowed and make your td centered aligned.

th.rotate {
    white-space: nowrap;
    -webkit-transform-origin: 65px 60px;
    -moz-transform-origin: 65px 60px;
    -o-transform-origin: 65px 60px;
    -ms-transform-origin: 65px 60px;
    transform-origin: 65px 60px;
}

td.rights {
    text-align: center;
}

Update for IE8 and below

For IE8 and below you are forced to use Transformation matrices instead of rotate(270deg). So, the correspondent rotation matrix for 270deg is [0, 1, -1, 0].

What you need to do, is add the following and should work just fine for IE8 and below:

th.rotate span {
    /* rotated text in IE renders very bad (unless you use clear type), so that even by making it normal, looks less bold but still bold */
    font-weight: normal\9; /* \9 is an hack for IE8 and below */
    letter-spacing: 3px\9; /* because is so bold, need to give letters some space to breath */

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod = "auto expand");
    width: 150px\9;
    height: 150px\9;
    margin-right: -130px\9;
}

Final jsFiddle version

IE9 problem and workaround In IE9, you will see a big black rectangle in the header section, and the reason to this bug is that IE9 recognizes both -ms-transform and filter. When both CSS are present, the browser simply renders a black area. To workaround this, I sugest you use conditional includes for IE9 to use -ms-transform only.


    CSS Howto..

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    Why is last select option always shown, even when styled out

    How to rotate a div

    how to show background image(multiple) if out of current div

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to make an entire square div clickable with CSS?

    Text overlay over image on hover. How to stop other divs from moving

    How do you create an arrow for sub navigation like this?

    CSS How to generate this Shape on a Div or on Canvas

    How to make image appear upon hover over text using css?

    How to go from scrolling to fixed header [closed]

    How to count total number of divs with in a div using CSS

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to add jQuery function to hover (show) and then click to show another menu

    How the licensed web font is getting rendered?

    How do I add an attribute to a specific CSS class?

    HTML/CSS How to apply CSS to “a” with custom data attribute?

    How can I fill in the background behind text when I hover over it in a nav bar? [HTML/CSS]

    How do you make speech bubble with Tooltipsy?

    How to make a full width sub-menu [closed]

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    Added ellipsis for long text but it showing below the text

    How to override inline css from external class?

    css make img shown when hover a li

    How to remove extra space in navigation bar? [duplicate]

    How to generate css using google chrome inspector to further use them?

    How to give different color to draghandle in RangeSlider

    How can I create this centered header with multiple colors?

    How to create cube with only HTML and CSS?

    How to set caption for youtube videos box in css?