Texto vertical en IE dentro de una celda de tabla

Question

Estoy tratando de rotar un navegador de texto cruzado dentro de una celda de tabla delgada que se extiende por algunas filas. Quiero que sea un buen resumen compacto de las filas, por lo que es delgado y girado -90 grados. Los consejos descritos aquí:

Vertical (rotated) text in HTML table

trabajo como un encanto excepto en, sorpresa sorpresa, es decir, cuando se hace girar el texto, pero el texto se recorta a la anchura de la celda.

Éstos son los estilos pertinentes:

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

y el html:

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

Va a ser mi héroe si me puede conseguir más allá de éste :)

Answer 1

Si fuera usted, habría abierto InkScape y habría creado tres imágenes diferentes.

o como ya tiene imágenes impresas, solo córtelas. y ponerlos como imagen de fondo.

Frecuentemente hago un diseño css extremadamente bello que funciona en Chrome y Firefox y luego imprimo en pantalla, recorto y reemplazo el diseño real con imágenes y todo funciona en IE.

o span: dispaly: bloque y altura: 100%; ??

Answer 2

No

la forma más elegante, pero funciona bajo IE8 (no procesada de acuerdo con las versiones anteriores):

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

Answer 3

creé 2 CSS, una para IE y otro para el resto de los navegadores. Para IE utilicé:

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

Answer 4

Descubrí que si bien parecía funcionar, se cortaba como en la publicación original. Después de jugar con algunas opciones, agregué "table-layout: fixed;" a la tabla de css. De esa manera podría forzar todos mis anchos de columna a los requeridos y se mostraría todo el lapso.

Solo probado en IE8 por el momento, pero creo que debería funcionar en todos los navegadores, ya que lo único que realmente agregué fue el diseño de la tabla, que creo que es totalmente aceptado. Establecerlo en arreglado hace que todas las columnas sean iguales (ignorando el contenido) excepto donde se han establecido los anchos, por lo que debe establecer todos los anchos donde sea necesario.

Sólo un pensamiento de todos modos.

Mi CSS relacionada:

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

Tenga en cuenta que el ancho de la extensión debe ser la misma que la altura de la celda para evitar que se derrame. Si tiene un contenido más grande para recorrer en el lapso, considere cambiar el tamaño de la altura o el ancho de la columna.