Vertical text in IE within a table cell

问题

I'm trying to rotate some text cross browser within a thin table cell that spans a few rows. I want it to be a nice compact summary of the rows, which is why it is thin and rotated -90 degrees. The tips described here:

Vertical (rotated) text in HTML table

work like a charm except in, surprise surprise, IE, where the text is rotated, but the text is clipped to the width of the cell.

Here are the relevant styles:

#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}


#schedmenu td.label span {
display:block;
-moz-transform: rotate(-90deg);  /* FF3.5+ */
  -o-transform: rotate(-90deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
          zoom: 1;

color:white;
position:relative;
top:12px;
}

and the html:

<td class="label" rowspan="3"><span>Recent</span></td>

You will be my hero if you can get me past this one :)

回答1:

I created 2 CSS, one for IE and one for the rest of the browsers. For IE I used:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

回答2:

If I were you, I would have open InkScape and created three different image.

or as you already have printscreened images, just crop it. and put them as background image.

I frequently do some extremely beautiful css design which works in chrome and firefox and then print screen it , crop it and replace the actual design with images and it all works in IE.

or span: dispaly:block and height:100%; ??

回答3:

I found that whilst it seemed to work, it cut off like you had in your original post. After playing with a few options, I added "table-layout: fixed;" to the table's css. That way I could force all my column widths to their required and the entire span would show up.

Only tested in IE8 at the moment, but I believe it should work cross-browser, since the only thing I really added was the table-layout, which I believe is fully accepted? Setting it to fixed makes all columns equal (ignoring content) except where widths have been set, so you need to set all your widths where required.

Just a thought anyway.

My related CSS:

table.comp{
    table-layout: fixed;
}
th.vertth {
    vertical-align:middle;
    height: 125px;
    width: 20px;
    overflow: hidden;
}
th.vertth span {
    -moz-transform: rotate(-90deg);  /* FF3.5+ */
    -o-transform: rotate(-90deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
    zoom: 1;
    position:relative;
    display:block;
    margin: 0;
    width: 125px;
}

Note that the width of the span should be the same as the height of the cell to prevent it from spilling out. If you have larger content to go in the span, consider resizing your column height or width.

回答4:

Not the most elegant way, but it works under IE8 (didn't tried under older versions):

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>

来源：https://stackoverflow.com/questions/3225572/vertical-text-in-ie-within-a-table-cell

标签

html

css

internet-explorer-8