html - rotate - ¿Cómo mostrar el texto vertical en los encabezados de tabla con altura automática/sin desbordamiento de texto?

rotate table html

Question

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

violín de demostración

Mi pregunta es, ¿cómo hacer que el encabezado de la tabla crezca según sea necesario? Esencialmente debería verse así:

Answer 1

Hay una nueva característica CSS3 (experimental) que hace exactamente eso: writing-mode .

Tienes que aplicarlo 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>

Gracias a @gman - funciona en Firefox pero no en Chrome. Se puede envolver el contenido de th en div para tener el texto vertical en la demostración de Chrome js-fiddle pero se siente como un embrollo.

Answer 2

bueno ... sé que esta no es la mejor solución pero puede corregirla con javascript del lado del cliente. En jQuery se vería así:

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

En cuanto a una solución HTML o CSS pura, creo que esta es una limitación del navegador.

Answer 3

utilizar

writing-mode: vertical-lr;

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 4

Como una pregunta antigua, esto es más como información o recordatorio sobre el margen vertical o el relleno en% que toma el ancho del padre como referencia .

Si usa un pseudo elemento y un relleno vertical, básicamente puede dibujar 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> un ancho pequeño, table-layout:fixed + width puede ayudar. 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 desea que la tabla aún pueda crecer desde su contenido pero no desde el ancho de <th> , puede usar una envoltura con un margen negativo opuesto a la dirección / dirección del documento: aparentemente, lo 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 desde demo y 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 más antiguo, debe usar el modo de escritura (CSS): http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx