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

但是，set the parent parent height from an absolutely positioned child似乎不太可能，因此内容溢出了<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

我建议循环所有标记，并向其父级添加bg黄色：

document.querySelectorAll('mark').forEach(function(item){
  item.parentElement.style.backgroundColor ="ff0";
});

codepen： https://codepen.io/HBA/pen/BaayQOL

Answer 2

使用大的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>