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?¿Cómo puedo controlar el ancho de una celda de encabezado de tabla que contiene texto girado?
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 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>
Gracias Duopixel, esto definitivamente lo acerca más en chrome. Pero IE todavía no está funcionando. ¿Algún consejo específico de IE? Lo que estoy viendo es que la rotación está sucediendo correctamente, pero el texto no se está posicionando correctamente. Si no tengo un estilo de altura de fila de encabezado, el texto girado se superpone a los datos en las filas de datos. Incluso si dimensiono el alto de la fila del encabezado, el texto no está directamente sobre la columna en cuestión. – Erik