Have child of td element take up full width and height - html

Question

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>
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;
}
<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>
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
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
position: relative;
}
td > mark {
display: block;
margin: -8px;
padding: 8px;
}
<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>
Q: Any other ways that this might be possible?

Answer 1

Use a big box-shadow and hide the overflow
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;
}
<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>

Answer 2

I suggest to loop all marks and add bg color yellow to their parent :
document.querySelectorAll('mark').forEach(function(item){
item.parentElement.style.backgroundColor ="ff0";
});
codepen:
https://codepen.io/HBA/pen/BaayQOL