skobanev
@skobanev
Слепой ПЬЮ!

Правильное отображение значка загрузки на HTML таблице в overflow?

Добрый.
Стараюсь добавить наглядности загрузки таблицы. но пока не получается. Объяснять долго, визуально выглядит вот так:
5db7de852f486344938538.png

Код:
HTML:

<div class="tableFrame loadProgress">
<table class="table">
...
</table>
</div>

CSS:

.tableFrame {
  position: relative;
  height: 541px;
  overflow: auto;
  padding: 2px;
  margin: 0 auto;
  margin-bottom: 10px;
  border: 1px solid #ccc; 
}

.table {
z-index:1;
}

.loadProgress {
  background: rgba(0,0,0,0.05);
  background-image: url("/images/ajax-loader.gif");
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 200;
}

Я может что то не совсем понимаю, но игрался по инструкциям и ничего не получилось.
Все равно вылазиют обрамления строк.
А Если поставить бутстраповский класс table-striped то и все окрашивания вылазиют поверх картинки.
Как сделать все правильно ?
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
shuchkin
@shuchkin
веб-программист, сисадмин, предприниматель
<div class="tableFrame">
<table class="table">
...
</table>
<div class="loadProgress"></div>
</div>


.loadProgress {
  ...
  position: absolute;
  z-index: 20000;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы