¿Cómo puedo controlar el ancho de una celda de encabezado de tabla que contiene texto girado?

Question

Jugué con esto durante una hora más o menos antes de decidir que estaba por encima de mi cabeza cuando se trata de cosas de CSS como esta. Básicamente, estoy intentando tener una celda de encabezado con texto girado en mi página. La rotación parecía ser lo suficientemente simple-- ¡gracias a la comunidad de stackoverflow! --pero el ancho de la columna no funciona para mí. ¿Alguien tiene alguna sugerencia para que la columna "Satisfacción general" sea estrecha?

Target es para IE, aunque me encantaría que funcione en los grandes buscadores.

Usted puede ver algunos de mis restos de jugar con él ... DIV en cada celda TH, altura de la TR, etc. Nada de eso es necesario para lo que estoy tratando de lograr.

El objetivo de rotar el texto fue ahorrar espacio horizontal y, por lo que veo, eso no está sucediendo.

Aquí está mi intento simplificado:

<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

Es necesario aplicar posición absoluta a la div por lo que ya no ocupa el espacio horizontal (la columna se ajuste automáticamente a la anchura del resto de las células). A continuación, un texto-guión para reposicionar el elemento dentro de la célula:

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

Editar: solución para esto 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/

Se puede aplicar tanto a través del uso de conditional comments.

Answer 2

En la tabla declaración css agregue table-layout: fixed; Esto garantiza que el ancho de las columnas de las tablas se mantenga exactamente como lo declara, sin importar qué imágenes o texto se coloque en cada celda.

Por cierto - en lugar de:

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

intento:

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

que es menos código y un enfoque simplificado y soluciona los problemas de IE.

(Lo siento por el problema de diseño respuesta anterior)

Answer 3

Esto debe ser HTML Día lección TABLA 2, pero no lo es.

propiedad de la tabla css: "table-layout: fixed"