Как сделать HTML-таблицу с фиксированными заголовками (закрепить их)?

Вопрос

Существует ли какой-нибудь кроссбраузерная CSS/JavaScript метод отобразить длинную HTML-таблицу, чтобы её заголовки оставались зафиксированными и не прокручивались вместе с телом таблицы?

Я бы хотел, чтобы посетитель мог выполнять прокрутку контекста в таблице, но при этом заголовки оставались всегда видны сверху, чтобы ему было легче ориентироваться.


Ответ №1

Я думаю, что следующий код на основе jQuery должен работать в большинстве браузеров. Вот принцип работы этого метода:

  • Клонируем таблицу, которая должна иметь фиксированные заголовки, и помещаем клон над оригиналом.
  • Удаляем тело таблицы из клона.
  • Удаляем заголовки таблицы из оригинала.
  • Применяем ширину столбцов (предварительно сохранили эту ширину).

Вот код:

function scrolify(tblAsJQueryObject, height){
    var oTbl = tblAsJQueryObject;
    // для очень длинных таблиц вы можете удалить 4 следующие линии
    // и поместить таблицу в ДИВ и назначить ему высоту и свойство overflow
    var oTblDiv = $("<div/>");
    oTblDiv.css('height', height);
    oTblDiv.css('overflow','scroll');
    oTbl.wrap(oTblDiv);
    // сохраняем оригинальную ришину
    oTbl.attr("data-item-original-width", oTbl.width());
    oTbl.find('thead tr td').each(function(){
        $(this).attr("data-item-original-width",$(this).width());
    });
    oTbl.find('tbody tr:eq(0) td').each(function(){
        $(this).attr("data-item-original-width",$(this).width());
    });
    // клонируем оригинальную таблицу
    var newTbl = oTbl.clone();
    // удаляем заголовки из оригинальной таблицы
    oTbl.find('thead tr').remove();
    // удаляем тело таблицы из новой таблицы
    newTbl.find('tbody tr').remove();
    oTbl.parent().parent().prepend(newTbl);
    newTbl.wrap("<div/>");
    // заменяем исходную ширину столбца
    newTbl.width(newTbl.attr('data-item-original-width'));
    newTbl.find('thead tr td').each(function(){
        $(this).width($(this).attr("data-item-original-width"));
    });
    oTbl.width(oTbl.attr('data-item-original-width'));
    oTbl.find('tbody tr:eq(0) td').each(function(){
        $(this).width($(this).attr("data-item-original-width"));
    });
}
$(document).ready(function(){
    scrolify($('#tblNeedsScrolling'), 160); // 160 is height
});
    <div style="width:300px;border:2px solid black;">
        <table border="1" width="100%" id="tblNeedsScrolling">
            <thead>
                <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
            </thead>
            <tbody>
                <tr><td>Ряд 1, столбец 1</td><td>Ряд 1, столбец 2</td></tr>
                <tr><td>Ряд 2, столбец 1</td><td>Ряд 2, столбец 2</td></tr>
                <tr><td>Ряд 3, столбец 1</td><td>Ряд 3, столбец 2</td></tr>
                <tr><td>Ряд 4, столбец 1</td><td>Ряд 4, столбец 2</td></tr>           
                <tr><td>Ряд 5, столбец 1</td><td>Ряд 5, столбец 2</td></tr>
                <tr><td>Ряд 6, столбец 1</td><td>Ряд 6, столбец 2</td></tr>
                <tr><td>Ряд 7, столбец 1</td><td>Ряд 7, столбец 2</td></tr>
                <tr><td>Ряд 8, столбец 1</td><td>Ряд 8, столбец 2</td></tr>           
            </tbody>
        </table>
    </div>
Пример
Заголовок 1 Заголовок 2
Ряд 1, столбец 1 Ряд 1, столбец 2
Ряд 2, столбец 1 Ряд 2, столбец 2
Ряд 3, столбец 1 Ряд 3, столбец 2
Ряд 4, столбец 1 Ряд 4, столбец 2
Ряд 5, столбец 1 Ряд 5, столбец 2
Ряд 6, столбец 1 Ряд 6, столбец 2
Ряд 7, столбец 1 Ряд 7, столбец 2
Ряд 8, столбец 1 Ряд 8, столбец 2

Нет комментариев

Добавить комментарий


(обязательно)