Sobreposição em cima de tbody
Estou tentando criar uma sobreposição de carregamento em cima detbody (e apenas tbody). Minha solução atual é adicionar tr como o último elemento detbody e defina-o comoposição: absolutoe definindo tbody comoposição: relativa.
table {
width: 100%;
}
tbody {
position: relative;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(200, 200, 200, 0.7);
}
<table>
<thead>
<tr>Label</tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
<tr class="overlay">
<td>My overlay</td>
</tr>
</tbody>
</table>
O comportamento esperado é que uma sobreposição cubratbody, mas nãothead. Além disso, essa sobreposição deve conter algum conteúdo (por exemplo, botão de atualização), cobrindo todos ostd não é uma opção.
Minha solução funciona perfeitamente no Firefox, mas não no webkit. Webkit de alguma forma ignoraposição: relativa emtbody tag e, portanto, a sobreposição cobre todo omesa e mais.
RESOLVIDOConsegui fazer essa abordagem funcionar adicionandodisplay: table emtbody