problemas con THead de una tabla y su CSS

[ClaCS]

Holas gente!

Tengo un problemin. Lo q pasa es q tengo una tabla q tiene cabeceras con letras en vertical pero estas cabeceras salen muy anchas (unas mas q otras)

Algo asi



Los 2 primeros cabezales son horizontales. Pero los 8 demas, son verticales

El css para poner vertical las cabeceras del thead es

Código:

.rotar 
{
	font-size:11px;font-weight:bold;
	writing-mode:tb-rl;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform: rotate(-90deg);	
	white-space:nowrap;
	height:300px;
	width:20px;
}

Con lo q en code el thead qdaria mas o menos asi

Código:

<thead><tr >
<th>NRO</th>
<th>ALUMNO</th>
<th class="rotar">COMUNICACION 1</th>

<th class="rotar">EDUCACION POR EL ARTE</th>
<th class="rotar">RAZONAMIENTO LOGICO</th>
<th class="rotar">HISTORIA</th>
<th class="rotar">EDUCACION FISICA</th>
<th class="rotar">ARTES MARCIALES</th>
<th class="rotar">RELIGION</th>
<th class="rotar">ALGEBRA</th>

</tr></thead>

La cuestion es q ni poniendo un ancho de 20px se adelgazan las cabeceras

Al parecer el ancho de los cabezales depende de q tan largo sea el nombre del curso escrito en vertical ...

Lo q desearia es poder ponerlas del ancho de los recuadros verdes (en la imagen) y si se pudiera tb q los textos de las cabeceras verticales empiezen desd la linea roja

Como puedo acerlo???

Gracias por todo de antemano

[XxflezhaxX]

intenta con width:auto;
o usando cellpading en la thead.

[ClaCS]

Despues de unos dias encontre la solucion Y lo posteo. Espero q a alguien le pueda servir O si lo mejora y lo comparte mucho mejor ;)

Lo primero q hay q acer es poner un span o div en cada una de las cabeceras de la tabla en el code html asi

Código:

...
<th><div class="rotar">EDUCACION FISICA</div></th>
<th><div class="rotar">ARTES MARCIALES</div></th>
...

y como class css esto

Código:

.rotar 
{
	display:block;
	white-space:nowrap;
	width:20px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

agregarle adicionalmente al th un estilo algo asi

Código:

...
<th style="padding-left:5px;padding-bottom:5px;text-align:center;height:215px;vertical-align:bottom;"><th><div class="rotar">EDUCACION FISICA</div></th>
...

y listo! ...con eso qda solucionado el problema :) . Hay un inconveniente. En FF se ve muy bien pero en IE 8 no se aprecia bien (q novedad)

en FF 3.6.7



en IE 8 se ven cortados las cabeceras




Si alguien pudiera arreglarlo. Bienvenido sea

Salu2

[TotemmetoT]

Intenta buscar los hacks para IE8 y aplica, por ejemplo, un margin-bottom adecuado. A ver si así sube el texto.