только css - переполнение таблицы с фиксированным заголовком - PullRequest
Новая
       15

только css - переполнение таблицы с фиксированным заголовком

7 голосов
/ 20 марта 2012

Я пытаюсь создать таблицу с возможностью прокрутки в направлениях x и y, если содержимое больше контейнера.Я также хочу, чтобы заголовок всегда был виден сверху.У меня первая часть работает, и заголовок всегда виден сверху, однако размеры столбцов заголовка не совпадают с размерами таблицы.

Я создал эту скрипку:

http://jsfiddle.net/xxQQS/1/

Я выбрал решение только для CSS.

РЕДАКТИРОВАТЬ: Кажется, есть довольно много людей, которые думают, что это не можетбыть сделано только с CSS.Это может быть правдой, однако, пожалуйста, не просто пишите, чтобы сказать «нет, это не может быть сделано».Если вы можете объяснить, почему это не может быть сделано без CSS, я приму ваш ответ.

Ответы [ 3 ]

2 голосов
/ 21 марта 2012

Создайте клон своего стола.Для первой таблицы скройте все строки, кроме заголовков, используя visibility: hidden.Скройте заголовок другой таблицы, используя visibility: hidden.Поместите ваши таблицы в div с установленными свойствами переполнения: 

<div style="overflow-x: hidden; width: 400px;">
    <div style="overflow-y: hidden; height: 20px;">
        <table id="head-only">
        </table>
    </div>
    <div style="overflow-y: scroll; height: 100px;">
        <table id="body-only">
        </table>
    </div>
</div>
0 голосов
/ 02 января 2019

Я тоже искал решение для липких заголовков, чтобы использовать его на моем сайте. Наконец-то нашел плагин Jquery, который легко выполняет эту липкую часть заголовка. https://github.com/jmosbech/StickyTableHeaders

Вам не нужно добавлять CSS, плагин позаботится об этом. Он клонирует заголовок таблицы во время прокрутки. Инициализация довольно проста 

$('table').stickyTableHeaders();

Надеюсь, это поможет :) Как сказано в других ответах, это не может быть достигнуто исключительно с помощью CSS, я думаю.

0 голосов
/ 20 марта 2012

Может быть для этого вам придется использовать JS. Проверьте это http://www.tablefixedheader.com/

...