¿Por qué Firefox falta el borde en algunas tablas HTML?

Question

Estoy usando Firefox 3.5.7 y tengo el mismo CSS utilizado en varias tablas HTML, pero hay algunos ejemplos donde partes de los bordes no se muestran.

Lo que no tiene sentido para mí es que el mismo CSS en la misma página para otra tabla HTML funciona bien. Además, la misma página en Internet Explorer se ve bien desde un punto de vista fronterizo.

Aquí hay una imagen con un ejemplo, como se puede ver en este caso, la parte inferior de la primera tabla no tiene un borde.

¿Alguien tiene una idea de por qué esto iba a pasar aquí?

Answer 1

Tal vez haya acercado/alejado un poco. Esto puede suceder accidental o deliberadamente cuando lo hace Ctrl + Rueda de desplazamiento. Tal vez no esté completamente reseteado al nivel de zoom cero. Este comportamiento erróneo es entonces reconocible en algunos sitios web, también aquí en SO.

Para solucionar esto, simplemente pulse Ctrl + o hacer Ver>zoom> Restablecer para restablecer el nivel de zoom por defecto.

Este es el error 410959 de Firefox/Gecko. Esto afecta a las tablas con border-collapse:collapse. Es de 2008 y no hay un progreso real en él, por lo que probablemente deba encontrar una solución. Una forma es usar border-collapse:separate y manipular los bordes por celda.

Answer 2

Esto fue causado por la tabla (con un borde inferior faltante) para estar dentro de un div ... Aparentemente, el borde no se calculó en la altura de la tabla, por lo que el borde estaba allí pero no se mostró.

Otorgando el div circundante un margen inferior de 1px resolvió el problema.

Answer 3

Encontré un problema similar cuando reduje el zoom en Firefox en una aplicación en la que estoy trabajando.

La causa principal era tener la propiedad CSS border-collapse establecida en collapse.

Cambiándolo a separate en su lugar se corrigió el problema. Sin embargo, eso significaba que tenía que replantearme la forma en que se aplican los bordes a varias partes de la tabla, porque de lo contrario los bordes parecerán doblar en grosor. Terminé teniendo que usar jQuery para dar una "última" clase especial a la última td o th en cada tr, y a la última tr en la tabla. Mi consulta era algo así como:

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last'); 

Mis reglas CSS fueron similares que:

table 
{ 
    border-collapse: separate !important; 
} 

table tr, table th, table td 
{ 
    border-right-width: 0; 
    border-bottom-width: 0; 
    border-left: 1px solid black; 
    border-top: 1px solid black; 
} 

table td.last, table th.last 
{ 
    border-right: 1px solid black; 
} 

table tr.last td 
{ 
    border-bottom: 1px solid black; 
} 

table 
{ 
    border: 0; 
} 

Yo terminar usando el navegador de orientación de modo que sólo aplican estas reglas a los usuarios de Firefox, pero puede funcionar para todos los navegadores, no lo he probado

Answer 4

Simplemente use border-spacing:0; espero que esto solucione su problema.

Answer 5

El borde comenzó a desaparecer cuando se aumentó el zoom en el navegador. Pude resolverlo haciendo lo siguiente. Probado en Chrome y Firefox.

padding: 0.5px !important 

Answer 6

tuve el mismo problema con el borde de la tabla que falta. Mi solución es:

table{ 
    border-collapse: collapse !important; 
    border-spacing: 0px; 
    border: 1px solid #DDD; 
} 

y la frontera de filas de la tabla:

table tr{ 
    border-bottom: 1px solid #DDD !important; 
} 

estoy usando Bootstrap ya sea en mi diseño y la tabla tiene también clases CSS de arranque como "mesa de ping-rayas mesa- bordeado"

Esta solución funciona para mí, cuando me trató con solución

border-collapse: separate !important; 

no funcionó correctamente para mí.

Answer 7

Sobre la base de la buena respuesta de @GregL (I parecen incapaces de "comentar" directamente encima): En lugar de utilizar jQuery para generar un "último" de clase, simplemente utilicé la incorporada en el selector de pseudo-elemento :first-child . Construí reglas seleccionando tr:first-child y td:first-child que definen border-top y border-left (en lugar de border-right y border-bottom como en la respuesta de GregL). Las reglas genéricas definen border-right y border-bottom en lugar de border-left y border-top. :first-child es said to be supported en Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, y Opera v. 9.6(). Probado en Firefox v. 40.0.3, donde vi este problema en primer lugar.

Answer 8

trabajó para mí realización de respuesta @Donald Payne

* (.table - arranque de clase)

table.table { 
    border-collapse: separate !important; 
} 

table.table tr, 
table.table th, 
table.table td { 
    border-right-width: 0 !important; 
    border-bottom-width: 0 !important; 
    border-left: 1px solid #DDD !important; 
    border-top: 1px solid #DDD !important; 
} 

table.table td:last-child, 
table.table th:last-child { 
    border-right: 1px solid #DDD !important; 
} 

table.table tr:last-child td { 
    border-bottom: 1px solid #DDD !important; 
} 

table.table { 
    border: 0 !important; 
} 

table.table thead tr:last-child th, 
table.table thead tr:last-child td { 
    border-bottom: 1px solid #DDD !important; 
} 

table.table tbody tr:first-child th, 
table.table tbody tr:first-child td { 
    border-top-width: 0 !important; 
}