HTML Hide Table rows

So I am trying to add an incrementing number to the first cell of a HTML table. Which I have done using examples found in this forum. What I want to do next is hide any row that only contains the number in the first cell. The only real option I have available is css but I am unsure if it is possible. The code I have so far is

table {
  border-collapse: collapse;
  counter-reset: rowNumber;
}
table tr:not(:first-child) {
  counter-increment: rowNumber;
}
table td > *:empty {
  display: none;
}
tr > td:empty {
  background-color: yellow;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

<table border="1px" empty-cells:hide;>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Test</td>
  </tr>
  <tr>
    <td></td>
    <td>Test</td>
  </tr>
  <tr>
    <td></td>
    <td>Test</td>
  </tr>
</table>