Combining anchor-offset and target-styling on a html-table

https://stackoverflow.com/questions/56434340/combining-anchor-offset-and-target-styling-on-a-html-table

HTML

<h2>
  Working Example: Anchor-Offset
</h2>

<a href="#AnchorTarget1">Anchor Target 1</a><br>
<a href="#AnchorTarget2">Anchor Target 2</a><br>

<table style="display:block">
  <tbody>
    <a class="anchor" id="AnchorTarget1"></a>
    <tr>
      <td>Content1A</td>
      <td>Content1B</td>
    </tr><br>
    <a class="anchor" id="AnchorTarget2"></a>
    <tr>
      <td>Content2A</td>
      <td>Content2B</td>
    </tr>
  </tbody>
</table>

<h2>
  Working Example: Anchor-Highlight
</h2>
<a href="#AnchorTarget3">Anchor Target 3</a><br>
<a href="#AnchorTarget4">Anchor Target 4</a><br><br>

<table>
  <tbody>
    <tr id="AnchorTarget3">
      <td>Content3A</td>
      <td>Content3B</td>
    </tr>
    <tr id="AnchorTarget4">
      <td>Content4A</td>
      <td>Content4B</td>
    </tr>
  </tbody>
</table>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> End of document

CSS

td {
  background-color: #CCC;
  padding: 0.5em
}

tr:target td {
  background-color: red;
}

a.anchor {
  display: block;
  position: relative;
  top: -15px;
  visibility: hidden;
}