Why is Firefox missing the border on some HTML tables

Question

I am using Firefox 3.5.7 and I have the same CSS used in multiple HTML tables, but there are some examples where parts of the borders are not shown.

What makes no sens

Answer 1

This is a bit tangential, but for those searching for missing borders in Firefox…

I had a border-bottom of a table-row (<tr>) that was missing where a background had been set on a specific cell. It turned out this was caused by a rogue position: relative on the cell, removing that (or changing it to position: inherit) fixed it.

Firefox 70.0.1

Answer 2

Building on the good answer of @GregL (I seem unable to "comment" directly on it): Instead of using JQuery to generate a "last" class, I simply used the built-in pseudo-element selector :first-child. I built rules selecting tr:first-child and td:first-child that define border-top and border-left (instead of border-right and border-bottom as in GregL's answer). The generic rules define border-right and border-bottom instead of border-left and border-top. :first-child is said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, and Opera v. 9.6 (). Tested on Firefox v. 40.0.3, where I saw this problem in the first place.

Answer 3

Border started going missing when browser zoom was increased. I was able to solve it by doing the following. Tested in Chrome and Firefox.

padding: 0.5px !important