Tabla bien cuadrada

[Tarzan]

Hola a todos/as,

Necesito implementar una tabla cuyas celdas tengan exactamente EL MISMO ANCHO. No me importa el alto y quiero que el contenido se ajuste a este último pero sin modificarme el ancho ni un sólo pixel.

He visto que en este foro ya hay algunos post que hablan sobre el diseño de tablas con celdas de tamaño fijo y he tratado de hacer lo que la gente indicaba pero no encuentro una solución exacta.

Indico el código html:

table class=marcoCabeceraForo style='table-layout:fixed' width='747px' cellpadding=0 cellspacing=0>
<tr>
<td class=marcoCeldaNumeroForo width='11%'>Icono</td>
<td class=marcoCeldaTextoForo width='45%'>Subcategoría</td>
<td class=marcoCeldaTextoForo width='24%'>Último Tema</td>
<td class=marcoCeldaNumeroForo width='9%'>Temas</td>
<td class=marcoCeldaNumeroForo width='10%'>Mensajes</td>
</tr>
</table>

<table class=marcoSubcategoriaForo style='table-layout:fixed' width='747px' cellpadding=0 cellspacing=0>
<tr>
<!-- Icono -->
<td class=marcoCeldaNumeroForo width='11%' height='50px'><img src='icono.jpg'></img></td>
<!-- Subcategoria -->
<td class=marcoCeldaTextoForo width='45%' height='50px'>Normas del Foro</td>
<!-- Último Tema -->
<td class=marcoCeldaTextoForo width='24%' height='50px'>Recomendaciones y Consejos</td>
<!-- Número de Temas de la Subcategoría -->
<td class=marcoCeldaNumeroForo width='9%' height='50px'>5</td>
<!-- Número de Mensajes de la Subcategoría -->
<td class=marcoCeldaNumeroForo width='10%' height='50px'>1</td>
</tr>
</table>

y el CSS que utilizo:

.marcoCabeceraForo {
FONT-FAMILY: Arial, Helvetica, sans-serif;
border: 1px ridge Black;
BACKGROUND-COLOR: #89A993;
height: 25px;
FONT-SIZE: 13px;
}

.marcoCeldaTextoForo {
border:1px ridge black;
font-family:Times New Roman;
color: Black;
text-align : left;
PADDING-LEFT: 10PX;
FONT-SIZE: 13px;
table-layout: fixed;
}

.marcoCeldaNumeroForo {
border:1px ridge black;
font-family:Times New Roman;
color: Black;
text-align : center;
table-layout: fixed;
FONT-SIZE: 13px;

}

El contenido de las celdas que indico lo he introducido manualmente ya que el mi proyecto lo capturo de una base de datos con php.
Sé que la desviación del ancho de las celdas es mínima y sólo vaía uno o dos pixeles pero quiero que todas las celdas tengan exactamente el mismo ancho.
Si el contenido es superior al ancho especificado, la celda puede agrandarse a lo alto para mostrar todo el texto.

He probado también con divs pero no he llegado a conseguir lo que quiero.
¿Puede alguien ayudarme?

Saludos,

[Aresillo]

Una cuestión..quieres que tenga el ancho de la pantalla...
Pones esto:

Código:

<tr>
<td class=marcoCeldaNumeroForo width='11%'>Icono</td>
<td class=marcoCeldaTextoForo width='45%'>Subcategoría</td>
<td class=marcoCeldaTextoForo width='24%'>Último Tema</td>
<td class=marcoCeldaNumeroForo width='9%'>Temas</td>
<td class=marcoCeldaNumeroForo width='10%'>Mensajes</td>
</tr>
</table>

11+45+24+19+10=109¿?

Otra cosa es que si no te importa el alto se lo has definido a 50px??

Aressillo!!

[Tarzan]

Hola Aresillo,

Los valores sobre el ancho de cada celda de la tabla son porcentajes. El total de la tabla es de 747 píxels. Esto es el tamaño fijo de la tabla y el ancho de cada celda es un valor porcentual de estos 747.
Pero todas las celdas de la tabla (columnas), deben tener el mismo valor porcentual para el ancho y en algunos casos, las celdas de la tabla de arriba no coinciden con las celdas (correspondientes por columna), de abajo.

tabla ancho= 747
[columna 1][columna 2][columna 3][columna 4][columna 5]
[columna 1 ][columna 2][columna 3][columna 4][columna 5]

Obsérvese que los corchetes representas los bordes de las celdas y no cuadran con los de arriba a pesar de que están definidos con el mismo valor porcentual para el ancho.


Respecto a especificar el alto en 50 píxels, sí que es verdad que podría quitárselo puesto que me da igual que se alargue.

Pero, ¿Por qué no mantienen el mismo ancho las celdas?

[Aresillo]

Hola de nuevo Tarzan...
He estado jugando con tu código y el css no funciona porque las clases se ponen entre comillas (class="tuestilo")
Y en todo tu documento no es así y no aplica bien estilos...

Por otro lado, si lo que quieres es una tabla no sé porque pones dos tablas... haz una tabla de dos filas y se quedan igual...yo lo he hecho y va bien.. aunque probablemente desconozca que lo has hecho así por algo...

Ya me dices...

Aresillo!!

[Tarzan]

Hola Aresillo!!,

Gracias por responder tan rápido. Verás, te explico.

Pensaba que no era obligatorio usar las comillas con los estilos. Pero lo he probado y no me cambia el resultado...jo. ;(

Lo de usar dos tablas es porque no tengo más remedio, según veo. Resulta que una tabla es para una especie de encabezado. Y la segunda está dentro de un for en php. un for que extrae filas y filas de una consulta a una base de datos.

luego tengo que hacerlo en dos tablas por eso. Pero el hecho de usar dos tablas, si yo le especifico el mismo porcentaje para el ancho, no debería dar problemas, verdad?

Según lo tengo en este momento hay alguna diferecia de 1 o dos píxels en algunas celdas entre ambas tablas....

Jo, ¿qué puedo estar haciendo mal?

[Mikmoro]

Mira, yo con este código veo las dos tablas exactamente iguales:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Tarzan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.marcoCabeceraForo {
FONT-FAMILY: Arial, Helvetica, sans-serif;
border: 1px ridge Black;
BACKGROUND-COLOR: #89A993;
height: 25px;
FONT-SIZE: 13px;
}
.marcoCeldaTextoForo {
border:1px ridge black;
font-family:Times New Roman;
color: Black;
text-align : left;
PADDING-LEFT: 10PX;
FONT-SIZE: 13px;
table-layout: fixed;
}
.marcoCeldaNumeroForo {
border:1px ridge black;
font-family:Times New Roman;
color: Black;
text-align : center;
table-layout: fixed;
FONT-SIZE: 13px;
}
</style>
</head>
<body>
<table class="marcoCabeceraForo" style='table-layout:fixed' width='747px' cellpadding=0 cellspacing=0 border="1">
<tr>
<td class="marcoCeldaNumeroForo" width='11%'>Icono</td>
<td class="marcoCeldaTextoForo" width='45%'>Subcategoría</td>
<td class="marcoCeldaTextoForo" width='24%'>Último Tema</td>
<td class="marcoCeldaNumeroForo" width='9%'>Temas</td>
<td class="marcoCeldaNumeroForo" width='10%'>Mensajes</td>
</tr>
</table>
<table class="marcoSubcategoriaForo" style='table-layout:fixed' width='747px' cellpadding=0 cellspacing=0 border="1">
<tr>
<td class="marcoCeldaNumeroForo" width='11%' height='50px'><img src='icono.jpg'></img></td>
<td class="marcoCeldaTextoForo" width='45%' height='50px'>Normas del Foro</td>
<td class="marcoCeldaTextoForo" width='24%' height='50px'>Recomendaciones y Consejos</td>
<td class="marcoCeldaNumeroForo" width='9%' height='50px'>5</td>
<td class="marcoCeldaNumeroForo" width='10%' height='50px'>1</td>
</tr>
</table>
</body>
</html>

[Tarzan]

Muchísimas gracias Milkmoro!!!

Es justo lo que necesitaba!! Puede añadir el contenido en texto que quiera que las celdas se agrandan por lo alto y no por lo ancho!!

Es perfecto!!
Cómo lo has hecho?... veo que has añadido el atributo style='table-layout:fixed' a cada tabla!!. yo lo había puesto en el css para cada celda pero no para cada tabla!!

Muchas gracias!

[Aresillo]

Qué has hecho porque llevo un rato limpiando código y nada!!

Aresillo!!

[Mikmoro]

Iniciado por Tarzan

veo que has añadido el atributo style='table-layout:fixed' a cada tabla!!. yo lo había puesto en el css para cada celda pero no para cada tabla!!

No, el table layout lo tenías en tu código de muestra al principio puesto en cada tabla.

Y la cosa es simple: he hecho lo que te ha dicho Aresillo, es decir, poner comillas a las clases de las tablas y celdas, y algo muy importante: poner un doctype adecuado en la cabecera

Y también cerrar la última clase que la tenías abieta en el trozo de CSS.

[Aresillo]

No me lo puedo creer!
Eso ya lo había hecho yo y no sé porque no me había salido...
Aunque el dtd no me había fijado si es que...
Olvidemos el transicional....

Gracias Mik

Aresillo!!

[Mikmoro]

Bueno, creo. Igual he tocado alguna otra cosa y no me acuerdo
Pero creo que no. De todos modos es fácil comparar.