Have child of td element take up full width and height

I have a <td> element with a little bit of padding, and I'd like to shade in the entire table cell when it's immediate child is a <mark> element.

I'm using markdown to generate the table itself, so simply adding a class like <td class="highlight"> isn't really an option.

Basic Table Setup

Here's a basic table setup

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

With some basic CSS

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

Attempt #1

One idea was to absolutely position the <mark> element and pin it to all four sides:

td > mark {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 8px;
}

However, it doesn't seem possible to set the parent parent height from an absolutely positioned child, so the contents overflows the <td>

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

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

td > mark {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 8px;
}

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

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

<!-- end snippet -->

Attempt #2

Another idea was to reverse the padding with a negative margin like this:

td > mark {
    display: block;
    margin: -8px;
    padding: 8px;
}

However, if there is a line wrap in another cell, I can't get the child element to occupy the full height available

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

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

td > mark {
    display: block;
    margin: -8px;
    padding: 8px;
}

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

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

<!-- end snippet -->

Q: Any other ways that this might be possible?

Use a big box-shadow and hide the overflow

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

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
}
td {
 overflow:hidden;
}
td > mark {
  display:inline-block;
  box-shadow: 0 0 0 50px yellow; 
}

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

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

<!-- end snippet -->