internos - quitar lineas interiores tabla html

Cómo eliminar completamente 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 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 delgadas 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?

Answer 1

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>

Answer 2

En un entorno de arranque, ninguna de las respuestas principales ayudó, pero al aplicar lo siguiente se eliminaron todas las fronteras:

.noBorder {
border:none !important;
}

Aplicado como:

<td class="noBorder">

Answer 3

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.

Answer 4

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

table, tr, td {
border: none;
}

Answer 5

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

Y en css:

table {border: none;}

EDITAR: Como señaló iGEL, esta solución está oficialmente en desuso (aún funciona), por lo que si está empezando desde cero, debe ir con la solución de colapso de borde de jnpcl.

En realidad, no me gusta mucho este cambio hasta ahora (no trabaje 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 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.).

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

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

Answer 6

table {
border-collapse: collapse;
}
/* remove padding */
td, th {
padding: 0;
}