Creación de una tabla HTML con texto orientado verticalmente como encabezado de tabla

Me gustaría crear una tabla HTML con texto escrito verticalmente como encabezado (es decir, el texto del encabezado se gira 90 grados). Estoy utilizando el estilo flipCreación de una tabla HTML con texto orientado verticalmente como encabezado de tabla

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left" id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>

En MS IE 9.x se muestra OK. En Firefox y Chrome, el encabezado parece flotar sobre la parte superior de la tabla, se superpone con las filas de la tabla debajo de él. ¿Alguien puede ayudar? Simplemente no tengo idea de por qué está sucediendo esto. Empecé con este tutorial: http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA, Tamas

Fuente

2012-02-24 user1054310

no creo que pueda obtener la altura de la <th> para cambiar al girar su contenido con CSS solo. Debajo está cómo hago esto con un poco de jQuery.

http://jsfiddle.net/tsYRQ/1004/

Fuente

2012-02-24 17:14:58 deefour

no funciona con Safari, no me las arreglo para hacer que las columnas delgadas. – gamov

Este [fiddle fork] (http://jsfiddle.net/p2FEY/) funcionará para Firefox (-moz-transform), y también reduce el ancho del encabezado a un tamaño adecuado. –

No funciona para mí en Firefox 46 – dude

De http://blog.petermares.com/2010/10/27/vertical-text-in-html-table-headers-for-webkitmozilla-browsers-without-using-images/

Uso de CSS para girar un elemento (por ejemplo, un <div>) dentro de un elemento de <td> hace que el ancho de la columna para reducir el tamaño de apenas acomodar el texto girado - sin embargo, la altura de la fila no crece según sea necesario.

Funciona en Chrome y Safari en Mac (al menos para mí).

<html> 
    <head> 
     <style> 
      th 
      { 
       background-color: grey; 
       color: white; 
       text-align: center; 
       vertical-align: bottom; 
       height: 150px; 
       padding-bottom: 3px; 
       padding-left: 5px; 
       padding-right: 5px; 
      } 

      .verticalText 
      { 
       text-align: center; 
       vertical-align: middle; 
       width: 20px; 
       margin: 0px; 
       padding: 0px; 
       padding-left: 3px; 
       padding-right: 3px; 
       padding-top: 10px; 
       white-space: nowrap; 
       -webkit-transform: rotate(-90deg); 
       -moz-transform: rotate(-90deg);     
      }; 
     </style> 
    </head> 
    <body> 

     <table> 
      <tr> 
       <th>Column 1</th> 
       <th><div class="verticalText">Column 2</div></th> 
       <th>Column 3</th> 
       <th><div class="verticalText">Column 4</div></th> 
       <th>Column 5</th> 
       <th><div class="verticalText">Column 6</div></th> 
       <th>Column 7</th> 
       <th><div class="verticalText">Column 8</div></th> 
       <th>Column 9</th> 
      </tr> 
      <tr> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
       <td>Data 1</td> 
      </tr> 
      <tr> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
       <td>Data 2</td> 
      </tr> 
     </table> 

    </body> 
</html>

Fuente

2013-03-26 12:16:43 SimonD

El problema con esto es que está configurando una altura estática en el estilo 'th' de' 150px'. Mire todos los espacios en blanco adicionales, incluso encima de sus columnas de texto vertical: http://jsfiddle.net/2xP5C/ Es por eso que prefiero usar jQuery, ya que establecerá la altura para que sea tan alta como sea necesaria para ajustarse al el bit más largo de texto. – deefour

Tienes razón, creí equivocadamente que la altura de la hilera se estaba ajustando, ¡pero estaba siendo descuidada! Parece que un híbrido de las dos respuestas podría dar el mejor resultado ...? – SimonD

Creo que hay una manera más fácil de obtener el texto vertical en la celda de la tabla:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test</title> 
    <style> 
     td { 
     text-align: center; 
     } 
     /*Creation of vertical text in cell*/ 
     .vertical_Text { 

       display: block; 
       color: #f00; 

       -webkit-transform: rotate(-90deg); 
       -moz-transform: rotate(-90deg);     
      }; 
    </style> 
</head> 
<body> 
<table border="1" cellspacing="10" cellpadding="20"> 
    <thead> 
     <tr> 
      <!-- vertical cell --> 
      <td rowspan="2"><span class="vertical_Text" title="vertical text">HEAD</span></td> 
      <td>header1-2</td> 
      <td colspan="3">header1-2</td> 
     </tr> 

     <tr> 
      <td>header2-1</td> 
      <td>header2-2</td> 
      <td>header2-3</td> 
      <td>header2-4</td> 
     </tr> 

    </thead> 
    <tbody> 

     <!-- tr*5>td{data-$/$$}*5 --> 
     <tr> 
      <!-- vertical cell --> 
      <td rowspan="5"><span class="vertical_Text" title="vertical text">DATA</span></td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

Fuente

2017-01-13 14:44:55 greg

Funciona solo para datos del ejemplo mostrado, pero el título más largo en vez de HEAD arruinó la tabla, caída de teble –

Creación de una tabla HTML con texto orientado verticalmente como encabezado de tabla

Respuesta

Cuestiones relacionadas