On my machine (Windows 10 in Zen browser, Zen is fork of Firefox), the following code SHOULD show three bordered cells, but the third is missing a bottom, like so (including image in case it renders correctly in your browser):
Can reproduce on:
Windows 10 Zen (based on Firefox)
macOS Firefox - thx C3roe
Windows 10 Firefox
Android Firefox
Cannot reproduce on:
iPhone Safari
iPhone Chrome
table {
border-collapse: collapse;
}
td {
border: 2px solid;
}
.top,
.middle {
border-bottom: 0;
padding-bottom: 0;
}
.bottom,
.middle {
border-top: 0;
padding-top: 0;
}
<table>
<tr>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
</tr>
<tr>
<td class='middle'></td>
<td class='middle'></td>
<td rowspan='2' class='bottom'></td>
</tr>
<tr>
<td class='bottom'></td>
<td class='bottom'></td>
</tr>
<tr>
</tr>
</table>
My question is: Why?
I figured that every cell starting from the 3rd is missing the bottom.
Also, if I inspect the page, and remove, then add class='top' or something, it re-renders correctly! Why??
This is minimised production code. All these things are needed:
3 or more (visual) cells, doesn't work with 2.
<tr></tr> with 3 fewer visual cells after the broken row. Example with 4 visual cells in 1st row, 1 cell in the second: 
All cells starting with cell with rowspan='2' are broken. (Next row has to have 3 fewer visual cells, see previous point.)
Another example.
table {
border-collapse: collapse;
}
td {
border: 2px solid;
}
.top,
.middle {
border-bottom: 0;
padding-bottom: 0;
}
.bottom,
.middle {
border-top: 0;
padding-top: 0;
}
<table>
<tr>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
</tr>
<tr>
<td class='middle'></td>
<td class='middle'></td>
<td rowspan='2' class='bottom'></td>
<td class='middle'></td>
<td class='middle'></td>
</tr>
<tr>
<td class='bottom'></td>
<td class='bottom'></td>
<td class='bottom'></td>
<td class='bottom'></td>
</tr>
<tr>
</tr>
</table>
My result: 
Even bigger example showing the behaviour twice:
table {
border-collapse: collapse;
}
td {
border: 2px solid;
}
.top,
.middle {
border-bottom: 0;
padding-bottom: 0;
}
.bottom,
.middle {
border-top: 0;
padding-top: 0;
}
<table>
<tr>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
</tr>
<tr>
<td class='middle'></td>
<td class='middle'></td>
<td class='middle'></td>
<td class='middle'></td>
<td class='middle'></td>
<td rowspan='2' class='bottom'></td>
</tr>
<tr>
<td class='bottom'></td>
<td class='bottom'></td>
<td class='bottom'></td>
<td class='bottom'></td>
<td class='bottom'></td>
</tr>
<tr>
<td class='top'>a</td>
<td class='top'>a</td>
<td class='top'>a</td>
</tr>
<tr>
<td class='middle'></td>
<td class='middle'></td>
<td rowspan='2' class='bottom'></td>
</tr>
<tr>
<td class='bottom'></td>
<td class='bottom'></td>
</tr>
<tr>
</tr>
</table>
My result: 
Adding another visual cell and zooming in a lot:
Simplest example (without middle):
table {
border-collapse: collapse;
}
td {
border: 2px solid;
}
.top {
border-bottom: 0;
padding-bottom: 0;
}
.bottom {
border-top: 0;
padding-top: 0;
}
<table>
<tr>
<td class='top'>a</td>
<td class='top'>a</td>
<td rowspan='2' class='bottom'>a</td>
</tr>
<tr>
<td class='bottom'></td>
<td class='bottom'></td>
</tr>
<tr>
</tr>
</table>
Result: 
(missing top is expected, missing bottom is not!)
Workaround
Fill the last row with empty, borderless <td>s.
