让 td 元素的子元素占据整个宽度和高度

Question

我有一个<td>带有一点填充的元素，当它的直接子元素是一个<mark>元素时，我想在整个表格单元格中着色。

我使用 markdown 来生成表本身，因此简单地添加一个类似的类<td class="highlight">并不是真正的选择。

基本表设置

这是基本的表设置

<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>

具备一些基本的 CSS

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

尝试#1

一种想法是绝对定位<mark>元素并将其固定到所有四个侧面：

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

但是，似乎不可能从绝对定位的 child 设置父级 Parent 的高度，因此内容会溢出<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>

尝试#2

另一个想法是用负边距反转填充，如下所示：

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

但是，如果另一个单元格中有换行，我无法让子元素占据可用的完整高度

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>

问：还有其他可能实现这一点的方法吗？

Answer 1

使用大的box-shadow并隐藏溢出

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>