Cómo eliminar completamente los bordes de la tabla HTML


141

Mi objetivo es hacer una página HTML que sea similar a un "marco de fotos". En otras palabras, quiero hacer una página en blanco rodeada de 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 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 estoy obteniendo líneas blancas finas entre las celdas de la tabla, quiero decir que el borde de las imágenes no es continuo. ¿Cómo puedo evitar estos espacios en blanco?

Respuestas:


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

Y en css:

table {border: none;}

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

De hecho, no me gusta este cambio hasta ahora (no trabajo con tablas con tanta frecuencia). Hace que algunas tareas sean un poco más complicadas. Por ejemplo, cuando desea incluir dos bordes diferentes en el mismo lugar (visualmente), mientras que uno es SUPERIOR para una fila y el segundo es INFERIOR para la otra fila. Se colapsarán (= solo se mostrará uno de ellos). Luego debe estudiar cómo se calcula la "prioridad" del borde y qué estilos de borde son "más fuertes" (doble frente a sólido, etc.).

Me gustó esto:

<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 del borde, esto no funcionará ya que siempre se elimina un borde. Tengo que hacerlo de 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 puede usar algo como el estilo de borde "groove | ridge | inset | outset" con un solo borde. Pero para mí, esto no es óptimo, porque no puedo controlar ambos colores.

Quizás haya una solución simple y agradable para colapsar los bordes, pero aún no la he visto y, sinceramente, no he dedicado mucho tiempo a ello. Tal vez alguien aquí pueda mostrarme / nosotros;)


77
cellpacing y cellpadding están en desuso desde 1999, consulte developer.mozilla.org/en-US/docs/HTML/Element/table . Debe usar la solución @jnpcl.
iGEL

iGEL tiene razón, he editado mi respuesta. Honestamente, me sorprendió que haya quedado en desuso durante tanto tiempo y todavía lo estaba usando sin ningún problema :)
Damb


19

Para mí, necesitaba hacer algo como esto para eliminar completamente los bordes de la tabla y todas las celdas. Esto no requiere modificar el HTML en absoluto, lo que fue útil en mi caso.

table, tr, td {
    border: none;
}

3
Intenté cada sugerencia hasta aquí, y finalmente border: nonesolicité a tdjekyll convencido que hiciera una mesa sin bordes:<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">
Avio

16

En un entorno de arranque, ninguna de las respuestas principales ayudó, pero la aplicación de lo siguiente eliminó todos los bordes:

.noBorder {
    border:none !important;
}

Aplicado como:

<td class="noBorder">

1
Esta sugerencia funcionó para mí en Wordpress. Estaba teniendo dificultades para conseguir que no se hiciera cumplir la frontera.
robbpriestley

7

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

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

4

Esto es lo que resolvió el problema para mí:

En su etiqueta HTML tr, agregue esto:

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

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.