Как приклеить заголовок GridView

Вопросы по вёрстке и JavaScript
Ответить
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Как приклеить заголовок GridView

Сообщение dymsonn »

Здравствуйте. Вопрос вроде бы простой. Таблица имеет структуру

Код: Выделить всё

<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Пишем в css правила, которые приведут к

Код: Выделить всё

<table>
<thead style="position:sticky; top:50px">
</thead>
<tbody>
</tbody>
</table>
А успеха это не приносит. Приклеиваются только наименования столбцов и поля фильтров, а разлиновка прокручивается наверх. Как победить?

unknownby
Сообщения: 648
Зарегистрирован: 2019.11.05, 16:34
Контактная информация:

Re: Как приклеить заголовок GridView

Сообщение unknownby »

Стили

Код: Выделить всё

.table-fixed {
    overflow: auto;
    height: 500px;
}
.table-fixed-header thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background:#eee;
}
.table-fixed-first-column tbody td:first-child {
    position: sticky;
    left: 0;
    background:#eee;
}
Представление

Код: Выделить всё

<div class="table-responsive table-fixed table-fixed-header table-fixed-first-column">
	<table class="table">
		<thead>
			<tr>
				<th>...</th>
                        </tr>
		</thead>
		<tbody>
			<tr>
                        	<td>...</td>
                        </tr>
		</tbody>
	</table>
</div>
Второй и третий стиль присоединяется в зависимости от необходимости. Можно использовать оба или по раздельности.
1. Закрепляет шапку
2. Закрепляет первую (левую) колонку

Ответить