Firefox table border issue on cells next to a rowspan

I have a table with left and right borders only on the inside cells, the following is the markup and CSS that I have:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

table {
  border-collapse: collapse;
}

td {
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
  padding: 10px;
}

td:first-child {
  border-left: 0;
}

<!-- language: lang-html -->

<table>
  <tbody>
    <tr>
      <td rowspan="2">Cell with Rowspan</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>

<!-- end snippet -->

The output works fine in Chrome but Firefox and IE (current version) does not display the left border of the cell in the second row

Is there a problem with how I implemented it the CSS or should I just use classes on the 2nd row?

Here's a working preview in codepen

This happens because the first-child selector wipes out the left border:

td:first-child {
    border-left: 0;
}

Which is applied to the first cell in the second row:

Which actually feels like a reasonable interpretation of the spec.

If you can change the markup, the problem becomes much easier to address by manually adding a class to any cell you'd like to have a left border, but that's not super clean.

I can't think of any way for the selector on the second row to be aware of the rowspan on a child of the first row in order to conditionally remove the left border.

Any table border on the perimeter set to none or 1px solid white will sit behind the table border of inner cells (when border-collapse is set to collapse) so you can't just give every cell the border and then remove from the table edges.