Foros del Web » Creando para Internet » CSS »

problemas con THead de una tabla y su CSS

Estas en el tema de problemas con THead de una tabla y su CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2010, 23:29
 
Fecha de Ingreso: enero-2007
Mensajes: 63
Antigüedad: 10 años, 10 meses
Puntos: 2
Pregunta problemas con THead de una tabla y su CSS

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

Última edición por ClaCS; 13/07/2010 a las 23:35
  #2 (permalink)  
Antiguo 14/07/2010, 10:26
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: problemas con THead de una tabla y su CSS

intenta con width:auto;
o usando cellpading en la thead.
  #3 (permalink)  
Antiguo 22/07/2010, 21:34
 
Fecha de Ingreso: enero-2007
Mensajes: 63
Antigüedad: 10 años, 10 meses
Puntos: 2
Respuesta: problemas con THead de una tabla y su CSS

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
  #4 (permalink)  
Antiguo 23/07/2010, 05:44
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: problemas con THead de una tabla y su CSS

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

Etiquetas: tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:47.