Missing table borders in Firefox

Question

I have a table with data and when I view it in Firefox some of the borders are not showing. Please see screenshot attached.

This does not happen in any other browsers. Tested in Firefox, IE, Safari and Chrome.

Any idea why and hot to fix it?

I use styles to format the table:

.myTbl {
  border: 2px solid #cccccc;
  border-collapse: collapse;
}

.myTbl th, .myTbl td {
  white-space: nowrap;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 2px;
}

.myTbl td {
  text-align: center;
  width: 15%;
}

.myTbl tr:hover td {
  background-color: #ffffcc;
}

.myTbl thead th, .myTbl thead:hover th {
  text-align: center;
  font: normal 10px arial, verdana, sans-serif;
  background-color: #ffffff;
}

HTML:

<table class="myTbl">
<thead>
<tr>
    <th></th>
</tr>
</thead>
<tbody>
<tr>
    <td></td>
</tr>
</tbody>
</table>

Answer 1

Border-Collapse:Collapse - Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)

Border-Collapse:Seperate - Borders are detached (border-spacing and empty-cells properties will not be ignored). This is default

This link might be helpful for you to understand border-collapse:collapse and seperate and to understand how it works.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse