CSS :hover formats table rows unpredictably in Firefox - html

Question

I'm helping with an interactive table in a dashboard. Clicking rows in the table alters the data displayed on the rest of the dashboard. The table rows can have a 'selected' class, where the selected row is given a 4px bold border. The rows also have a :hover selector that gives them a 2px border.
My issue is that when using Mozilla Firefox V 56.0.1 this causes the rows between the row being hovered over and the selected row to be given a 4px border on the left and right sides of the row. See below for details.
Unintended behavior
Intended behavior
Here is the code:
HTML and CSS in CodePen
https://codepen.io/anon/pen/MOzJNZ
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black; }
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>

Answer 1

Added following class in order to fix firefox issue:
tr.notselected {
border: 0px solid black;
}
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black;
}
tr.notselected:hover td {
padding-bottom: 6px; }
tr.notselected {
border: 0px solid black;
}
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>