Учитывая следующую структуру таблицы:
<table border="1px">
<thead>
<tr>
<td rowspan="2">Item No</td>
<th colspan="2">Store ABC</th>
<th colspan="2">Store DEF</th>
</tr>
<tr>
<th>Baskets</th>
<th>Customers</th>
<th>Baskets</th>
<th>Customers</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Я бы хотел сделать заголовок таблицы липким, чтобы при прокрутке таблицы он оставался видимым.
Простая вещь, когда есть только одна строка заголовка. Тем не менее, все становится сложнее, когда есть два. Я придумал следующий CSS:
thead th, thead td {
position: sticky;
top: 0;
background: #eee;
}
Это "почти" работает, за исключением того, что при прокрутке таблицы две строки заголовка как бы "скользят" в одну и ту же позицию, а вторая строка появляется поверх первой.
Как сделать две строки заголовка липкими таким образом, чтобы их внешний вид не изменялся при прокрутке вниз по таблице (т. Е. Весь заголовок остается "блоком", а две отдельные строки остаются на месте)?
Обязательный jsFiddle: http://jsfiddle.net/juyvcLd6/3/
--- ОБНОВЛЕНИЕ
Идентификация двух строк заголовка с class="first" и class="second" соответственно, плюс добавление следующего css:
thead tr.first th, thead tr.first td {
position: sticky;
top: 0;
background: #eee;
}
thead tr.second th, thead tr.second td {
position: sticky;
top: 17px;
background: #eee;
}
позволяет удерживать строки заголовков вместе при прокрутке таблицы. Однако элемент top: 17px очень сильно зависит от фактического отображаемого размера строки. Если у пользователя браузер отображает размеры текста, например, по-другому, то все отключится.
Кроме того, этот метод имеет недостаток, заключающийся в довольно странном избавлении от границ заголовка.
Как убедиться, что при прокрутке таблицы:
- правило
top: xxx для второй строки фактически отражает real высоту первой строки?
- границы остаются в соответствии с тем, как они выглядят, когда таблица не прокручивается?
См. Обновленный jsFiddle: http://jsfiddle.net/juyvcLd6/4/