Creazione di una tabella HTML con testo orientato verticalmente come intestazione della tabella

Vorrei creare una tabella HTML con testo scritto verticalmente come intestazione (ad esempio, il testo dell'intestazione viene ruotato di 90 gradi). Sto usando lo stile flaccidoCreazione di una tabella HTML con testo orientato verticalmente come intestazione della tabella

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

In MS IE 9.x è visualizzato OK. In Firefox e Chrome l'intestazione sembra fluttuare sopra la parte superiore della tabella, si sovrappone alle righe della tabella sotto di essa. qualcuno può aiutare, per favore? Semplicemente non ho idea del perché stia succedendo. Ho cominciato con questo tutorial: http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA, Tamas

fonte

2012-02-24 user1054310

Io non credo che si possa ottenere l'altezza della <th> a cambiare quando la rotazione è contenuto con soli CSS. Di seguito è come faccio questo con un po 'di jQuery.

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

fonte

2012-02-24 17:14:58 deefour

non funziona con Safari, non riesco a fare le colonne sottili. – gamov

Questo [fiddle fork] (http://jsfiddle.net/p2FEY/) funzionerà per Firefox (-moz-transform), e inoltre ridurrà la larghezza dell'intestazione a una dimensione appropriata. –

Non funziona per me in Firefox 46 – dude

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

Utilizzo di CSS per ruotare un elemento (ad esempio un <div>) all'interno di un elemento <td> provoca la larghezza della colonna a ridursi al solo accogliere il testo ruotato - tuttavia l'altezza di righe non cresce come necessario.

Works in Chrome e Safari su Mac (almeno per me).

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

fonte

2013-03-26 12:16:43 SimonD

Il problema è che stai impostando un'altezza statica sullo stile '' t' di '150px'. Guarda tutti gli spazi bianchi extra, anche sopra le colonne del tuo testo verticale: http://jsfiddle.net/2xP5C/ Questo è il motivo per cui preferisco usare jQuery, poiché imposterà l'altezza per essere alta solo quanto è necessario per adattarsi al il pezzo di testo più lungo – deefour

Hai ragione - ho erroneamente pensato che l'altezza della fila si stesse adeguando, ma stavo semplicemente facendo attenzione! Sembra che un ibrido tra le due risposte possa dare il miglior risultato ...? – SimonD

penso che ci sia un modo più semplice per ottenere il testo verticale nella cella di una tabella:

<!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>

fonte

2017-01-13 14:44:55 greg

Funziona solo per i dati di esempio mostrato, ma didascalia più lunga HEAD ha rovinato la tabella, caduta di teble –

Creazione di una tabella HTML con testo orientato verticalmente come intestazione della tabella

risposta

Problemi correlati