Фиксированный заголовок таблицы с полосами прокрутки на GridView в IE8

Question

Я пытаюсь реализовать функцию добавления фиксированного заголовка к существующему подклассу GridView, SGridView.

Моя проблема в том, что с решением, перечисленным ниже, полоса прокрутки появляется под строкой заголовка и выглядит липкой. Я бы предпочел, чтобы полоса прокрутки проходила вертикально через верхний колонтитул. Единственная проблема заключается в том, что это означает, что первая пара строк будет покрыта заголовком, поскольку высота полосы прокрутки не учитывает включение строки заголовка (я предполагаю, что это побочный эффект абсолютного позиционирования). Есть мысли, как это исправить?

Мое решение состоит из следующего:

<div class="IEScrollDiv">
 <table class="GridView">
   <thead>
     <tr> <th clas="GVHeader"> my header row</th> </tr>
   </thead>
   <tbody>
     ...
   </tbody>
 </table>
</table>

Более или менее добавлен дополнительный код в метод Render (), чтобы обернуть таблицу в элемент div, который можно прокручивать. Ничего особенного. Затем я настроил таблицу для рендеринга и теги для доступности.

Поскольку добавление прокрутки к tbody в IE не определено, я не смог использовать его для создания фиксированного заголовка (lame). Кроме того, правило выражения css устарело в IE8, поэтому я тоже не смог использовать этот подход (множество обучающих программ, использующих его).

Итак, я добавил javascript для абсолютного позиционирования строки заголовка через класс GVHeader.

Спасибо

Answer 1

Для тех, кто может захотеть реализовать что-то подобное, подумал, что я опубликую свое решение.

Я не смог получить именно тот вид, который хотел (полоса прокрутки, проходящая через заголовок, но рядом с ним).

У меня просто было отображение сетки в виде пустого элемента div с классом, который увеличивает его на x пикселей, включая пробел для заголовка.Затем просто переместите заголовок поверх этого div.Теперь полоса прокрутки включает строку заголовка как часть высоты.

, так что разметка в конце выглядит так

<div class="IEScrollDiv">
 <div class="EmptyDiv"></div>
 <table class="GridView">
   <thead>
     <tr> <th clas="GVHeader"> my header row</th> </tr>
   </thead>
   <tbody>
     ...
   </tbody>
 </table>
</table>

.EmptyDiv
{
    height: 33px;
    margin: 0;
    padding: 0;
    background: #ffffff;
}