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

questionAnswers(3)

yourAnswerToTheQuestion