Cómo eliminar por completo los bordes de la tabla HTML

Question

Mi objetivo es crear una página HTML que sea similar a un "marco de fotos". En otras palabras, quiero hacer una página en blanco que esté rodeada por 4 imágenes.

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 los 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 estoy haciendo finas líneas blancas entre las celdas de la tabla, me refiero que el borde de las imágenes no es continuo. ¿Cómo puedo evitar estos espacios en blanco?

Answer 1

<table cellspacing="0" cellpadding="0"> 

Y en css:

table {border: none;} 

EDIT: Como se señaló Igel, esta solución está en desuso oficialmente (todavía funciona, aunque), por lo que si usted está comenzando desde cero, hay que ir con la solución de colapso de borde del jnpcl.

En realidad no me gusta este cambio hasta el momento (no funciona con tablas que a menudo). Hace que algunas tareas sean un poco más complicadas. P.ej. cuando desea incluir dos bordes diferentes en el mismo lugar (visualmente), mientras que uno es TOP para una fila, y el segundo es ABAJO para otra fila. Se colapsarán (= solo se mostrará uno de ellos). Luego debe estudiar cómo se calcula la "prioridad" de la frontera y qué estilos de borde son "más fuertes" (doble contra sólido, etc.).

lo hice así:

<table cellspacing="0" cellpadding="0"> 
    <tr> 
    <td class="first">first row</td> 
    </tr> 
    <tr> 
    <td class="second">second row</td> 
    </tr> 
</table> 

---------- 

.first {border-bottom:1px solid #EEE;} 
.second {border-top:1px solid #CCC;} 

Ahora, con el colapso de la frontera, esto no funciona, ya que siempre es una frontera eliminado. Debo hacerlo de alguna otra manera (hay más soluciones de c). Una posibilidad es usar CSS3 con box-shadow:

<table class="tab"> 
    <tr> 
    <td class="first">first row</td> 
    </tr> 
    <tr> 
    <td class="second">second row</td> 
    </tr> 
</table>​​​ 

<style> 
.tab {border-collapse:collapse;} 
.tab .first {border-bottom:1px solid #EEE;} 
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​ 
</style> 

También podría usar algo como "surco | cresta | inserción | principio" estilo de borde con sólo un borde sencillo. Pero para mí, esto no es óptimo, porque no puedo controlar ambos colores.

Quizás haya alguna solución simple y buena para colapsar las fronteras, pero aún no la he visto y honestamente no he dedicado mucho tiempo a ella. Tal vez alguien aquí será capaz de/mostrarnos;)

Answer 2

table { 
    border-collapse: collapse; 
} 

/* remove padding */ 
td, th { 
    padding: 0; 
} 

Answer 3

Para mí que tenía que hacer algo como esto para eliminar por completo las fronteras de la mesa y todas las células. Esto no requiere modificar el HTML en absoluto, lo cual fue útil en mi caso.

table, tr, td { 
    border: none; 
} 

Answer 4

En un entorno de arranque ninguna de las respuestas más ayudó, pero aplicando la siguiente eliminado todas las fronteras:

.noBorder { 
    border:none !important; 
} 

aplica como:

<td class="noBorder"> 

Answer 5

Esto es lo que resuelve el problema de yo:

En su etiqueta HTML tr, agregue esto:

style="border-collapse: collapse; border: none;" 

Quitó todos los bordes que se mostraban en la fila de la tabla.

Answer 6

En un entorno de arranque que aquí está mi solución:

<table style="border-collapse: collapse; border: none;"> 
     <tr style="border: none;"> 
      <td style="border: none;"> 
      </td> 
     </tr> 
    </table>