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

thead 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 puede ver en este caso, la parte inferior de la primera tabla no tiene un borde.

¿Alguien tiene una pista de por qué esto sucedería aquí?

Answer 1

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

padding: 0.5px !important

Answer 2

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

La causa principal fue que la propiedad CSS border-collapse se collapse .

Cambiarlo para separate lugar de arreglar 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 al último tr en la tabla. Mi consulta fue algo así como:

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

Mis reglas de CSS fueron similares a las siguientes:

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

Terminé utilizando la orientación del navegador para que solo aplicara estas reglas a los usuarios de Firefox, pero puede funcionar para todos los navegadores, no lo he probado.

Answer 3

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

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

Answer 4

Sobre la base de la buena respuesta de @GregL (parece que no puedo "comentar" directamente sobre ella): en lugar de usar JQuery para generar una "última" clase, simplemente utilicé el selector incorporado 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 lugar de border-left y border-top . :first-child se dice que :first-child es compatible con 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 5

Solo use border-spacing:0; Espero que esto resuelva su problema.

Answer 6

Tal vez has acercado / alejado un poco. Esto puede suceder accidentalmente o a sabiendas cuando 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, solo presiona Ctrl + 0 o haz clic en Ver > Zoom > Restablecer para restablecer el nivel de zoom a los valores predeterminados.

Este es el error 410959 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 utilizar border-collapse:separate y tocar los bordes por celda.

Answer 7

Tuve el mismo problema con la falta del borde de la mesa. Mi solución es:

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

Y borde para las filas de la tabla:

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

Estoy usando Bootstrap en mi diseño y en la tabla también hay clases bootstrap css como "table table-striped table-confdered"

Esta solución funciona para mí, cuando probé la solución con

border-collapse: separate !important;

no funcionó bien para mí.

Answer 8

trabajado para mí la realización de la respuesta @Donald Payne

* (.table - clase de arranque)

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