Прокручиваемая таблица CSS с фиксированным заголовком, но с использованием полосы прокрутки браузера, без переполнения

Это то, что я сделал. http://jsfiddle.net/FeHdS/5/

Как видите, когда вы используете полосу прокрутки браузера, вся таблица располагается за div "mainwrapper". Я хотел бы иметь свою таблицу с фиксированным заголовком, и я не хочу использовать прокрутку переполнения.

Я попытался просто назначить фиксированную позицию для thead.

thead{
    position: fixed;
}

но тогда первая строка таблицы занимает место заголовка.

Есть ли способ сделать это только с помощью CSS? Если нет, то какое решение было бы лучшим?


css scrollbar css-tables
person ILovemyPoncho    schedule 28.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать это с помощью CSS с javascript.

По сути, вы используете CSS для позиционирования таблицы и строки заголовка таблицы, а также для того, чтобы заставить таблицу вести себя как элементы div. Затем используйте javascript для управления позиционированием CSS строки заголовка таблицы и div «маски», который скрывает обычные строки таблицы при прокрутке таблицы. Поскольку ваша таблица теперь считает, что это элементы div, и размеры ячеек не совпадают по ширине, вам также необходимо использовать CSS для установки ширины так, чтобы ширина заголовка таблицы соответствовала ширине td.

Соответствующие компоненты:

<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">

  <div class="maskHolder">
     <div id="mask" class="mask">&nbsp;</mask>
  </div>

  <div class="fixedTable">
    <div id="theTable" class="theTable">

       <!-- here is the table, header row must have an ID -->
       <table border="0" cellspacing="5" cellpadding="5"> 
          <tr id="thFixed" class="thFixed"> 
            <td class="col1">Header cell 1</td> 
          </tr>
          <tr>
            <td class="col1">regular cell</td>
          </tr>
       </table>

    </div>
  </div>

</div>

Это довольно сложно, и его реализация занимает больше минуты или двух. Я сделал это для приложения, которое собирался часто использовать повторно. Вот демонстрация в jsFiddle (содержит CSS и javascript, а также html): http://jsfiddle.net/deborah/Msvvr/

person Deborah    schedule 03.04.2013
comment
Я забыл упомянуть, что он совместим с разными браузерами вплоть до IE8 (работает в IE8, но не в IE7). - person Deborah; 30.04.2014