¿Cómo mostrar el texto vertical en los encabezados de las tablas con altura automática/sin desbordamiento de texto?

Question

Quiero mostrar texto girado como encabezados de tabla, usando la propiedad de transformación CSS. La fila de cabecera debe ajustar su altura, según sea necesario, pero en lugar del texto girado simplemente se desborda:

demo fiddle

Mi pregunta es, cómo sacar el encabezado de la tabla creciendo a medida que sea necesario? En esencia, debe tener este aspecto:

Answer 1

Como una vieja pregunta, esto es más como información o recordatorio sobre el margen vertical o el relleno en% que toma el ancho de los padres como referencia.

Si utiliza un elemento seudo y vertical-relleno, puedes robar básicamente una caja cuadrada o <td>: http://jsfiddle.net/qjzwG/319/

.verticalTableHeader { 
    text-align:center; 
    white-space:nowrap; 
    transform-origin:50% 50%; 
    transform: rotate(90deg); 

} 
.verticalTableHeader:before { 
    content:''; 
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */ 
    display:inline-block; 
    vertical-align:middle; 
} 

Si desea mantener <td> on una anchura pequeña, table-layout:fixed + width poder ayuda. http://jsfiddle.net/qjzwG/320/

.verticalTableHeader { 
    text-align:center; 
    white-space:nowrap; 
    transform: rotate(90deg); 

} 
.verticalTableHeader p { 
    margin:0 -100% ; 
    display:inline-block; 
} 
.verticalTableHeader p:before{ 
    content:''; 
    width:0; 
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */ 
    display:inline-block; 
    vertical-align:middle; 
} 
table { 
    text-align:center; 
    table-layout : fixed; 
    width:150px 
} 

Si quieren mesa para seguir siendo capaz de crecer a partir de su contenido, pero no de ancho de <th>, utilizando un envoltorio con una notoria margen negativo frente a dir/dirección del documento podría hacer: parecer , el más cercano a sus necesidades, http://jsfiddle.net/qjzwG/320/

<table border="1"> 
    <tr> 
     <th class="verticalTableHeader"><p>First</p></th> 
     <th class="verticalTableHeader"><p>Second-long-header</p></th> 
     <th class="verticalTableHeader"><p>Third</p></th> 
    </tr> 

.verticalTableHeader { 
    text-align:center; 
    white-space:nowrap; 
    transform: rotate(90deg); 
} 
.verticalTableHeader p { 
    margin:0 -999px;/* virtually reduce space needed on width to very little */ 
    display:inline-block; 
} 
.verticalTableHeader p:before { 
    content:''; 
    width:0; 
    padding-top:110%; 
    /* takes width as reference, + 10% for faking some extra padding */ 
    display:inline-block; 
    vertical-align:middle; 
} 
table { 
    text-align:center; 
} 

HTML a partir de demostración y la base:

<table border="1"> 
    <tr> 
     <th class="verticalTableHeader">First</th> 
     <th class="verticalTableHeader">Second</th> 
     <th class="verticalTableHeader">Third</th> 
    </tr> 
    <tr> 
     <td>foo</td> 
     <td>foo</td> 
     <td>foo</td> 
    </tr> 
    <tr> 
     <td>foo</td> 
     <td>foo</td> 
     <td>foo</td> 
    </tr> 
    <tr> 
     <td>foo</td> 
     <td>foo</td> 
     <td>foo</td> 
    </tr> 
</table> 

Para IE mayor, deberá utilizar la escritura en modo (CSS): http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

Answer 2

así ... Yo sé que esto no es la mejor solución, pero se puede corregir con JavaScript del lado del cliente. En jQuery que se vería así:

$(".verticalTableHeader").each(function(){$(this).height($(this).width())}) 

como un HTML puro o solución CSS, creo que esto es una limitación navegador.

Answer 3

de nuevas (experimental) característica CSS3, que hace lo que exactamente eso: writing-mode .

usted tiene que aplicar en un div dentro de la celda de la tabla:

.vrt-header th { 
 
    writing-mode: vertical-lr; 
 
    min-width: 50px; /* for firefox */ 
 
}

<table class='vrt-header'> 
 
    <thead> 
 
    <tr> 
 
     <th>First</th><th>Second</th><th>Third</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>foo</td><td>foo</td><td>foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>foo</td><td>foo</td><td>foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>foo</td><td>foo</td><td>foo</td> 
 
    </tr> 
 
    </tbody> 
 
</table>