, После исправления ошибки пример ведет себя корректно. Но тогда это не решение проблемы.

аюсь создать загрузочный оверлей поверхTBODY (и только tbody). Мое текущее решение состоит в том, чтобы добавить tr в качестве последнего элементаTBODY и установите его какположение: абсолюти установка tbody какположение: родственник.

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>

Ожидаемое поведение заключается в том, что наложение охватываетTBODY, но нетTHEAD, Также предполагается, что это наложение содержит некоторый контент (например, кнопку обновления), поэтомутд это не вариант.

Мое решение отлично работает в Firefox, но не в webkit. Webkit как-то игнорируетположение: родственник наTBODY тег и, таким образом, наложение охватывает весьТаблица и более.

ПОСТАНОВИЛИМне удалось заставить этот подход работать, добавивдисплей: таблица наTBODY

Ответы на вопрос(1)

Поддержка довольно хорошая для собственности тоже.

Вам просто нужно сбалансировать calc с верхним свойством.

Таким образом, ваш CSS станет:

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}

Вот рабочий пример:

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}
<table>
  <thead>
    <tr><td>Label</td></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My overlay</td>
    </tr>
  </tbody>
</table>

Обновленный ответ с использованием CSS Calc.

 SWC04 дек. 2017 г., 14:47
@ TomášOndruš, пожалуйста, смотрите мой обновленный ответ. Сейчас он использует calc.
 SWC04 дек. 2017 г., 14:41
Для меня это покрывает большую часть таблицы, но оставляет заголовок таблицы видимым.
 UncaughtTypeError04 дек. 2017 г., 14:46
@ TomášOndruš Я могу подтвердить, чтоthead элемент остается видимым с помощью этого метода (в Chrome и FF Quantum)
 3rdthemagical04 дек. 2017 г., 14:40
Вы получили ошибку: tr без тд. Действительный HTML нарушает предполагаемый вид.
 Tomáš Ondruš04 дек. 2017 г., 14:40
К сожалению, благодаря такому подходу вся таблица покрывается наложением не только текста.

Ваш ответ на вопрос