Cómo eliminar completamente los bordes de una tabla HTML
Mi objetivo es hacer una página HTML que es similar a un "marco de fotos". En otras palabras, quiero hacer una página en blanco que está rodeado por 4 fotos.
Este es mi código:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>Y las clases CSS son las siguientes:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}Mi problema es que me salen unas finas líneas blancas entre las celdas de la tabla, es decir, que el borde de las imágenes no es continuo. ¿Cómo puedo evitar estos espacios blancos?
123
3
Y en css:
EDIT: Como iGEL señaló, esta solución es oficialmente obsoleto (todavía funciona sin embargo), así que si usted está comenzando desde cero, usted debe ir con el jnpcl's solución de colapso de los bordes.
En realidad no me gusta este cambio hasta ahora (no trabajo con tablas tan a menudo). Hace algunas tareas un poco más complicadas. Por ejemplo, cuando se quiere incluir dos bordes diferentes en el mismo lugar (visualmente), mientras que uno es TOP para una fila, y el segundo es BOTTOM para otra fila. Se colapsarán (= sólo se mostrará uno de ellos). Entonces tiene que estudiar cómo se calcula la "prioridad" de los bordes y qué estilos de bordes son "más fuertes" (doble vs. sólido, etc.).
A mí me gustó esto:
Ahora, con el colapso de los bordes, esto no funcionará ya que siempre hay un borde eliminado. Tengo que hacerlo de alguna otra manera (hay más soluciones ofc). Una posibilidad es usar CSS3 con box-shadow:
También podría utilizar algo como "groove|ridge|inset|outset" estilo de borde con un solo borde. Pero para mí, esto no es óptimo, porque no puedo controlar ambos colores.
Tal vez hay alguna solución simple y agradable para colapsar los bordes, pero no he visto todavía y honestamente no he pasado mucho tiempo en él. Tal vez alguien aquí será capaz de mostrarme/mos ;)
En mi caso necesitaba hacer algo así para eliminar completamente los bordes de la tabla y de todas las celdas. Esto no requiere modificar el HTML en absoluto, lo que fue útil en mi caso.