Come posso controllare la larghezza di una cella di intestazione della tabella che contiene testo ruotato?

Question

Ho giocato con questo per circa un'ora prima di decidere che ero sopra la mia testa quando si tratta di materiale CSS come questo. Fondamentalmente sto tentando di avere una cella di intestazione con testo ruotato sulla mia pagina. La rotazione sembrava essere abbastanza semplice-- grazie alla community stackoverflow! - ma la larghezza della colonna non funziona per me. Qualcuno ha qualche consiglio per ottenere la colonna "Soddisfazione generale" per essere stretta?

L'obiettivo è per IE, anche se mi piacerebbe farlo funzionare nei browser più grandi.

È possibile vedere alcuni dei miei avanzi da fare scherzi con esso ... DIV in ogni cella TH, altezza del TR, ecc. Nessuno di ciò è necessario per quello che sto cercando di realizzare.

L'intero punto di rotazione del testo era di salvare gli immobili orizzontali e da quello che sto vedendo, quello non sta accadendo.

Ecco la mia prova semplificata:

<style> 
.rotate { 
    padding: 0px 0px 0px 0px; 
    margin: 0px; 
} 
.rotate div { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 

    writing-mode: bt-rl; 

    padding: 0px 0px 0px 0px; 
    margin: 0px; 
    text-align: left; 
    vertical-align: top; 
} 
</style> 

<table border=1> 
    <thead> 
     <tr style="line-height: 200px"> 
      <th><div>Facility</div></th> 
      <th><div>Date</div></th> 
      <th><div>Score</div></th> 
      <th class="rotate"><div>Overall&nbsp;Satisfaction</div></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Los Angeles</td> 
      <td>11/12/2010</td> 
      <td>3.5</td> 
      <td>2.5</td> 
     </tr> 
     <tr> 
      <td>San Diego</td> 
      <td>11/17/2010</td> 
      <td>10.0</td> 
      <td>10.0</td> 
     </tr> 
    </tody> 
</table> 

Answer 1

È necessario applicare posizione assoluta al div in modo che non occupa lo spazio orizzontale (la colonna si auto regolare la larghezza del resto delle cellule). Poi un text-indent per riposizionare l'elemento all'interno della cellula:

.rotate div {position: absolute;} 

.rotate { 

    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    writing-mode: bt-rl; 
    text-indent: -3em; 
    padding: 0px 0px 0px 0px; 
    margin: 0px; 
    text-align: left; 
    vertical-align: top; 
} 

http://jsfiddle.net/p4EPd/

Edit: correzione per es

.rotate div { 
    -webkit-transform: rotate(-90deg) translate(0, 10px); 
    -moz-transform: rotate(-90deg) translate(0, 10px); 
    writing-mode: bt-rl; 
    padding: 0; 
    margin: 0; 
    height: 125px; 
} 

th.rotate {padding-top: 5px;} 

http://jsfiddle.net/6Xjvm/

È possibile applicare sia attraverso l'uso di conditional comments.

Answer 2

Nella tabella livello dichiarazione css aggiungi layout tabella: fisso; Ciò garantisce che la larghezza delle colonne delle tabelle rimanga esattamente come la dichiari, indipendentemente dalle immagini o testo posizionati in ogni cella.

Tra l'altro - anziché:

 
.rotate { 
    padding: 0px 0px 0px 0px; 
    margin: 0px; 
} 
.rotate div { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 

    writing-mode: bt-rl; 

    padding: 0px 0px 0px 0px; 
    margin: 0px; 
    text-align: left; 
    vertical-align: top; 
} 

<th><div>Facility</div></th> 

prova:

 
.rotation { 
    display:block; 
    /* for firefox, safari, chrome, etc. */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);/* For Opera*/ 
    -khtml-transform: rotate(-90deg);/* For Lunix*/ 
    /* for ie */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 
<th>Facility</th> 

che è meno codice e un approccio semplificato e risolve i problemi di IE.

(Ci scusiamo per la risposta problema di layout sopra)

Answer 3

Questo dovrebbe essere HTML Giorno lezione TABELLA 2, ma non lo è.

proprietà tabella css: "tabella-layout: fisso"