Testo verticale in IE all'interno di una cella di tabella

Question

Sto provando a ruotare alcuni browser di testo all'interno di una cella di tabella sottile che si estende su poche righe. Voglio che sia un bel riepilogo compatto delle righe, motivo per cui è sottile e ruotato di 90 gradi. I suggerimenti descritti qui:

Vertical (rotated) text in HTML table

lavoro come un fascino se non in, sorpresa sorpresa, IE, dove il testo viene ruotato, ma il testo viene troncato alla larghezza della cella.

Qui ci sono gli stili rilevanti:

#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; 
} 

e il codice HTML:

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

Sarete il mio eroe, se mi è possibile superare questo :)

Answer 1

Se fossi tu, avrei aperto InkScape e creato tre diverse immagini.

o come hai già stampato immagini, basta ritagliare. e metterli come immagine di sfondo.

Faccio spesso un bellissimo css design che funziona in chrome e firefox e quindi lo stampo, lo ritaglia e sostituisco il disegno reale con le immagini e tutto funziona in IE.

o intervallo: display: blocco e altezza: 100%; ??

Answer 2

Non è il modo più elegante, ma funziona in IE8 (non ha provato in versioni precedenti):

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

Answer 3

ho creato 2 CSS, uno per IE e uno per il resto dei browser. Per IE ho usato:

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

Answer 4

Ho scoperto che mentre sembrava funzionare, si è interrotto come nel post originale. Dopo aver giocato con alcune opzioni, ho aggiunto "table-layout: fixed;" al css del tavolo. In questo modo ho potuto forzare tutte le larghezze della colonna alle loro richieste e l'intera span si sarebbe mostrata.

Solo testato in IE8 al momento, ma credo che dovrebbe funzionare cross-browser, poiché l'unica cosa che ho davvero aggiunto era il layout della tabella, che credo sia pienamente accettato? Impostarlo su fisso rende tutte le colonne uguali (ignorando il contenuto) eccetto dove sono state impostate le larghezze, quindi è necessario impostare tutte le larghezze dove richiesto.

Solo un pensiero comunque.

mio correlato 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; 
} 

Nota che la larghezza della campata dovrebbe essere lo stesso come l'altezza della cella per evitare che fuoriesca. Se hai contenuti più grandi da includere nello span, valuta la possibilità di ridimensionare l'altezza o la larghezza della colonna.