Eliminar bordes de celda de tabla no deseados con CSS

Tengo un problema peculiar y frustrante. Por la sencilla marcado:Eliminar bordes de celda de tabla no deseados con CSS

<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 fondo de color a la culata en T , tr y tr elementos extraños. 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.

Me gustaría saber cómo eliminar estos bordes en los otros navegadores principales de modo que lo único que ve en la tabla sean los colores de las filas alternas.

Fuente

2010-01-11 Bob

¿De qué color es la frontera? – SLaks

Gracias a todos los que sugirieron agregar colapso de borde: contraer el CSS. Eso lo hizo. – Bob

169

es necesario agregar esto a tu CSS :

table { border-collapse:collapse }

Fuente

2010-01-11 01:38:30

+10

Tenga en cuenta que esto tiene que aplicarse a _table_, no a _td_'s. Acabo de cometer este error y pasé más de media hora tratando de descubrir por qué no estaba funcionando. – javawizard

Modificar el código HTML siguiente manera:

<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>

(I añade border="0" cellpadding="0" cellspacing="0")

En CSS, se puede hacer lo siguiente:

table { 
    border-collapse: collapse; 
}

Fuente

2010-01-11 01:38:20

CSS es la forma preferida. –

Modifiqué mi respuesta para incluir css –

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

Fuente

2010-01-11 01:38:30

@Josh ¿no es 'border: none'? –

@DougNeiner Publicación anterior, pero ninguno y 0 son igualmente válidos. Me gusta 0 porque tengo que escribir menos :) –

Establezca el atributo 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.

Fuente

2010-01-11 01:38:40 SLaks

añadir un poco de css:

td, th { 
    border:none; 
}

Fuente

2010-01-11 01:38:57

no funciona para mí en Chrome 60.0.3112.113 cuando se aplica a la tabla –

También es posible que desee agregar

table td { border:0; }

lo anterior es equivalente a establecer cellpadding = "0"

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

Fuente

2012-03-12 23:11:24 falc0n

Cellpadding es el espacio entre el contenido de la tabla y sus límites 'td {padding: X}'. El espaciado de celdas es el espacio entre las bourdries de cada celda ("margen" entre los bordes de las celdas). Puede establecer 'border-collapse' para imitar lo que hace el atributo' cellspacing' en la etiqueta de la tabla, pero no es infalible. – MetalFrog

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 de style.css de un tema secundario (hacer una operación "Buscar" para localizar 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; 
}

Por lo tanto este aspecto después:

.comment-content table { 
    border-bottom: 0; 

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

Fuente

2012-06-27 00:21:13

-2

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

Y si quieres que pueda para algo así

$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>

Fuente

2014-02-15 13:08:34 Admax

No entiendo qué es el estilo $ en esta respuesta. ¿Estás utilizando algún lenguaje de procesamiento del lado del servidor para establecer el atributo de estilo? –

Boo estilos en línea. – mopsyd

-1

a veces incluso después de borrar border s.

la razón es que usted tiene imágenes dentro de td, dando las imágenes display:block lo resuelve.

Fuente

2014-07-23 13:23:47 bresleveloper

para eliminar la frontera, juste usando css así:

td { 
border-style : hidden!important; 
}

Fuente

2017-04-02 11:59:36

Eliminar bordes de celda de tabla no deseados con CSS

Respuesta

Cuestiones relacionadas