Hola compañeros/as:
Desde hace mucho tiempo he padecido un problema con los navegadores que emplean el motor Gecko (familia Mozilla) y las tablas que hacen uso del atributo CSS "border-collapse" cuando se establece a "collapse".
Si diseñamos una tabla como ésta:
Código:
<table>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
Y aplicamos unos estilos como los siguientes:
Código:
body { margin: 0px; }
table { border-collapse: collapse; border-spacing: 0px; }
td { border: solid 4px #ff0000; width: 100px; }
Observamos que mientras que en Opera, Safari e Internet Explorer la esquina superior izquierda de la tabla se ajusta a la esquina del cuerpo del documento, en Firefox y familia éste toma como esquina de la tabla justamente la mitad del borde.
Antes de informar en Bugzilla (ya que hay muchísimos temas abiertos sobre fallos por causa del atributo "border-collapse"), quería preguntaros vuestra opinión: ¿Os parece este comportamiento el correcto, o bien es el que realizan los otros?
Lo digo porque he oído voces que basándose en lo que literalmente dice el estándar de la W3C, alegan que lo que hace Firefox podría ser correcto. La verdad es que por mucho que los bordes se "fundan" debido al atributo "collapse", creo yo que los externos deberían de comportarse de forma sólida, como lo hacen en Opera y los otros.
Sea como sea, se me ocurrió que para conseguir el mismo efecto sin usar "collapse" bien se puede hacer algo como esto:
Código:
body { margin: 0px; }
table { border-spacing: 0px; border: solid 4px #ff0000; }
table tr + tr td { border-top: solid 4px #ff0000; }
table td + td { border-left: solid 4px #ff0000; }
td { width: 100px; }
Con algo así se evitan los dobles bordes y el aspecto es idéntico al que se conseguiría con "collapse" en otros navegadores. Un saludo y gracias.