Firefox table border collapse bleed in - css

Question

I have a table with a thead and a tbody. I add a border-bottom to the thead and a background-color on the td in the tbody there seems to be some bleed in. This only happends in firefox :
Requirements :
It needs to look exactly the same in chrome firefox
You can't use empty cells
border-collapse cannot be changed
table {
border-collapse:collapse;
font-size:20px;
}
thead {
border-bottom:20px solid green;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>

Answer 1

The bug seems to be related by the fact that the td's in the first tr in the tbody, don't share the same borders as the td's in the last tr in the thead. This is happening because of the colspan="4".
A way to circumvent this issue is to put in a tr at the top of the tbody, that no-one can see ( because it has no height ).
table {
border-collapse:collapse;
font-size:20px;
}
thead {
border-bottom:20px solid green;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
tbody>tr:first-child{
height: 0px;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
Or maybe.. this alternative where I removed the bottom-border, but replaced it by a green row.
table {
border-collapse:collapse;
font-size:20px;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
th:last-child{
height: 20px;
background-color:green;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
PS: You should use th instead of td in headers