Wie kann ich die Breite einer Tabellenüberschriftzelle steuern, die gedrehten Text enthält?

Question

Ich spielte ungefähr eine Stunde damit herum, bevor ich entschied, dass ich über meinen Kopf hinweg war, wenn es um CSS-Sachen wie diese ging. Im Grunde versuche ich eine Kopfzeile mit gedrehten Text auf meiner Seite zu haben. Die Rotation schien einfach genug zu sein - danke stackoverflow Community! - aber die Breite der Spalte funktioniert nicht für mich. Hat jemand irgendwelche Tipps, um die Spalte "Allgemeine Zufriedenheit" schmal zu bekommen?

Ziel ist für IE, obwohl ich es gerne in den großen Browsern arbeiten würde.

Sie können sehen, einige meiner Reste von herumspielen damit ... DIV in jeder TH-Zelle, Höhe der TR, etc. Nichts davon ist notwendig für das, was ich zu erreichen versuche.

Der ganze Punkt des Drehens des Textes war, horizontalen Grundbesitz zu sparen, und von dem, was ich sehe, geschieht das nicht.

Hier ist mein vereinfachte Versuch:

<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

Sie müssen sie bewerben absolut zum div so dass es nicht mehr den horizontalen Raum einnimmt (die Spalte wird automatisch an die Breite des Restes der Zellen anpassen). Dann wird ein text-indent das Element innerhalb der Zelle neu zu positionieren:

.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: fix für das heißt

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

Sie beide durch die Verwendung anwenden können von conditional comments.

Answer 2

In der Tabelle Ebene css Deklaration hinzufügen Tabelle-Layout: behoben; Dadurch wird sichergestellt, dass die Breite der Tabellenspalten genau so bleibt, wie Sie sie deklarieren, unabhängig davon, welche Bilder oder Texte in den einzelnen Zellen platziert sind.

By the way - statt:

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

Versuch:

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

, die weniger Code und einen vereinfachten Ansatz und löst die IE Probleme.

(Sorry für die Antwort Layout-Problem oben)

Answer 3

Dieses HTML-Tabelle Lektion 2. Tag sein soll, ist es aber nicht.

CSS-Tabellen-Eigenschaft: "Tabellen-Layout: Fest"