Por qué a Firefox le falta el borde en algunas tablas HTML

Encontré un problema similar cuando se alejó en Firefox en una aplicación en la que estoy trabajando.

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

Cambiándolo a separate en su lugar se solucionó el problema. Sin embargo, eso significaba que tenía que repensar la forma en que los bordes se aplican a varias partes de la tabla, porque de lo contrario sus bordes parecerán duplicar en grosor. Terminé teniendo que usar jQuery para dar una clase especial "last" al último td o th en cada uno tr, y hasta el último tr en la tabla. Mi consulta fue algo como:

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

Mis reglas CSS eran 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;
}

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

Basándose en la buena respuesta de @GregL (me parece incapaz de "comentar" directamente sobre ella): En lugar de usar jQuery para generar una clase "last", simplemente usé el selector de pseudo-elemento incorporado :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 se dice que es compatible con 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.

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

Dando al div circundante un margen-fondo desde 1px solucionó el problema.

Tuve el mismo problema con la falta de borde de la tabla. 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 ya sea en mi diseño y la tabla también tiene clases css bootstrap como "table table-striped table-bordered"

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

border-collapse: separate !important;

No funcionó correctamente para mí.

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

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

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

*( .table-bootstrap class)

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