I came across this issue that all Material Table used in the ReactJS Application are not showing bottom border in the th row in the Firefox browser. This issue is not reproducible in Chrome.

So, I found css hack where you can simply change the position attribute specifically for the Firefox browser in the default MuiTableCell-head class. This class is applied at the cell level by Material-table.

@-moz-document url-prefix() {
  .MuiTableCell-head {
    position: static !important;
  }
}

The above code will remove the default sticky value for position which causes the issue with border-collapse in the .MuiTable-root class. You can also remove the border-collapse in a similar fashion but do test that it’s not breaking anything else.

The component which has the Material-table code should import the above css to take effect. This hack might also work generally for html table if you’re facing a similar issue without Material-table.