html - quitar - separar celdas de una tabla css

Eliminar bordes de celda de tabla no deseados con CSS

Question

Tengo un problema peculiar y frustrante. Para el marcado simple:

<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class=''odd''><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>

Aplico diferentes valores de color de fondo a los elementos thead , tr y tr impar. El problema es que en la mayoría de los navegadores, cada celda tiene un borde no deseado que no es del color de ninguna de las filas de la tabla. Solo en Firefox 3.5 la tabla no tiene fronteras en ninguna celda.

Solo me gustaría saber cómo eliminar estos bordes en los otros buscadores principales para que lo único que vea en la tabla sean los colores de las filas alternas.

Answer 1

Debes agregar esto a tu CSS:

table { border-collapse:collapse }

Answer 2

Después de probar las sugerencias anteriores, lo único que funcionó para mí fue cambiar el atributo de borde a "0" en las siguientes secciones del estilo de un niño. Style.css (hacer una operación de "Buscar" para ubicar cada una; las siguientes son solo fragmentos)

.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}

Así mirando así después:

.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}

Answer 3

Es posible que también desee agregar

table td { border:0; }

lo anterior es equivalente a establecer cellpadding = "0"

se deshace del relleno agregado automáticamente a las celdas por los navegadores que pueden depender de doctype y / o de cualquier CSS utilizado para restablecer los estilos de navegador predeterminados

Answer 4

Establezca el atributo de cellspacing de cellspacing de la tabla en 0 .

También puede usar el estilo CSS, border-spacing: 0 , pero solo si no necesita admitir versiones anteriores de IE.

Answer 5

Intente asignar el estilo de border: 0px; border-collapse: collapse; border: 0px; border-collapse: collapse; al elemento de la mesa.

Answer 6

Modifique su HTML así:

<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class=''odd''><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>

( border="0" cellpadding="0" cellspacing="0" )

En CSS, podrías hacer lo siguiente:

table {
border-collapse: collapse;
}

Answer 7

añadir algunos css:

td, th {
border:none;
}

Answer 8

algunas veces incluso después de despejar los border s.

la razón es que tienes imágenes dentro del td , display:block las imágenes display:block resuelve.

Answer 9

para eliminar el borde, juste usando css así:

td {
border-style : hidden!important;
}

Answer 10

<td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

Y si quieres, puedes hacer algo como eso

$style = '' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"'';
<td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>