我有一个 <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>
问:还有其他可能的方法吗?
最佳答案
使用大的box-shadow
并 overflow hidden
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>
关于html - 让 td 元素的子元素占据整个宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58273940/