Наложение поверх тела

Question

Наложение поверх тела

0

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

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>

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

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

RESOLVED Мне удалось сделать этот подход, добавив отображение: table on tbody

Tomáš Ondruš 04 дек. 2017, в 14:33

Источник

Теги:

html

css

2 ответа

Ещё вопросы

behdad · Answer 1 · 2017-12-04T11-20-00.000Z

вам нужно удалить позицию относительно тела и вместо нее на столе.

table {
  width: 100%;
  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><div>My overlay</div></td>
    </tr>
  </tbody>
</table>

Это странно. Фрагмент, который вы предоставили, на самом деле работает здесь, но не в моем проекте (на основе реакции). Есть что-нибудь, что может испортить расчет верхнего смещения или что-то? (к нему не применяются дополнительные стили)
Я не думаю, что вам нужен дополнительный стиль. Хотя в вашем проекте может быть другой стиль, который каким-то образом переопределяет этот стиль. Что я могу предложить, так это внимательно проверить ваш CSS, чтобы увидеть, где именно он переопределяется
Видите ли, этот пример не ведет себя так, как ожидалось. Это потому, что код HTML в примере недопустим. thead tr отсутствует td . После исправления ошибки пример ведет себя корректно. Но тогда это не решение проблемы.

SWC · Answer 2 · 2017-12-04T11-14-00.000Z

Использование CSS calc должно помочь в этом. Поддержка тоже хороша для собственности.

Вам просто нужно сбалансировать 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.

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