Меню

Html как зафиксировать шапку таблицы



Фиксированный заголовок таблицы HTML

Таблицы довольно часто используются для отображения некоторой статистической информации и не только. Наличие большого количества строк в таблице наводит на здравую идею — фиксацию заголовка таблицы для удобного восприятия данных из неё. Для реализации этой затеи одной стандартной таблицей, к сожалению, не обойтись, однако в этом нет ничего страшного, и в нашем примере мы рассмотрим решение этой проблемы посредством использования двух разных таблиц.

Наверное, вы уже догадались, что первая таблица будет использоваться для отображения именно фиксированной части заголовка. Вторая – будет отображать само содержимое таблиц. Для разделения таблиц так же будут использованы блоки div, и для задания одинаковых размеров для ячеек таблиц будут использованы общие атрибуты в CSS. Для второй таблицы будет доступен скроллинг, таким образом, она будет скролиться по отношению к первой таблице.

HTML разметка таблицы

Для наглядного примера мы сделали таблицу довольно содержательной, теперь код CSS стилей.

CSS стили таблицы

Так же для правильного отображения таблицы при ресайзинге мы воспользуемся простым Javascript-кодом:

Наглядный пример того что получилось вы можете просмотреть на демо-странице ссылка которой будет ниже. Если это показалось вам сложным решением, то не стоит раньше времени расстраиваться, попробуйте реализовать это дело самим, и вы поймете, что нет ничего сложного. Касательно темы таблиц так же рекомендую к прочтению статью о сортируемых таблицах Data Tables.
Демо | Скачать в архиве

Источник

Создание таблицы с фиксированной шапкой

Этот урок расскажет Вам о том как сделать таблицу с фиксированной шапкой, а также красивым эффектом выделения ячейки.

Подобная таблица будет очень полезна при большом количество полей и рядов. Любому пользователю будет очень легко в ней найти необходимую информацию.

Данный урок находится в категории CSS, так как закрепление шапки происходит благодаря этому языку. jQuery отвечает за подсветку полей и рядов.

В самом начале документа подключаем фреймворк, таблицу стилей и вспмогательный скрипт:

Читайте также:  Шапка лесси демисезонная для девочки

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

После открывающегося тега таблицы идут теги по количеству столбцов. Именно они отвечают за подсветку столбцов и рядов в таблице. Также в таблице использован тег

для выделения заголовка таблицы и ему в таблице стилей присвоены следующие стили:

Это дает эффект фиксирования. В этот заголовок можно вставить картинку, как и сделано в нашем примере.

Надеюсь, урок был полезным для Вас. Всего наилучшего!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 9 Июля 2009
Просмотров: 77276
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

Фиксированная шапка для таблицы при скроллировании (CSS)?

Имеется большая HTML таблица, которая не влазит в экран ни по горизонтали, ни по вертикали.

Нужно сделать так, чтобы при скроллировании вниз шапка таблицы всегда отображалась на странице.

(подобная функциональность реализована в MS Excel)

В идеале нужно сделать так же для первого столбца, который бы оставался на странице при скроллировании вправо.

Можно ли тут обойтись одним СSS, или придёться подключать JS?

  • Вопрос задан более трёх лет назад
  • 41874 просмотра

Раз никто не предлагает предложу свой вариант.
При прокрутке экрана, если координаты шапки относительно страницы уходят за экран, то отображать фиксированный «table», с позицией «left» как у шапки талицы, и «top» близким к 0. В эту таблицу нужно скопировать содержимое шапки, например через $(‘tr.head’).clone();

Читайте также:  Модели норковых шуб 48 50 размер

Или использовать вот этот вариант, контейнер будет таблицей, а ее шапка «липким сайдбаром». Если таблица уйдет ха экран, шапка опустится до максимально возомжного положения, чтобы ее было видно.

Источник

Как зафиксировать шапку таблицы при скролле?

Зафиксировать шапку и боковую колонку таблицы
Здравствуйте! Есть таблица, построенная полностью на тегах table, thead, tbody, tr, th, td.

Зафиксировать шапку сайта
Шапка вписалась в подложку отлично, но при изменении масштаба она вылазит на границы. Сделал так .

Зафиксировать шапку сайта
Сделал фиксацию шапки, а она ушли ниже футура что не так ? http://stavni.url.ph/ Сейчас я снял.

Пытаюсь зафиксировать шапку сайта
Пытаюсь зафиксировать шапку сайта чтобы все колонки и содержимое заходило под нее в результате .

Вот такой вариант реализации есть http://jsfiddle.net/4jfQ6/

Комментарий модератора
весь код следует размещать в теме

У меня же задача сделать примерно то же самое, но без использования свойства CSS Fixed.
Так как при его использовании при сжатии окна браузера по горизонтали, горизонтальная прокрутка не прокручивает содержание зафиксированного блока.
Иожет кто-нибудь помочь с решением данной проблемы?

Добавлено через 4 часа 59 минут
Нашел уже сам, хоть пол-дня пришлось повозиться, скрипт приложу, но если кому-то непонятно будет, могу разъяснить:

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Ещё раз о «как зафиксировать шапку»
Здравствуйте. Проблема, шапку зафиксировал, но при скроле шапка оказывается под содержимым. как.

HTML Зафиксировать шапку и меню навигации
Здравствуйте, можете помочь, как сделать пустую страничку в которой шапка и меню навигации.

Зафиксировать заголовок таблицы при прокрутке
Добрый день. Есть сайт, в его середине находится достаточно длинная таблица, необходимо реализовать.

Как зафиксировать блоки таблицы HTML / CSS ?
Здравствуйте. Делаю небольшой сайт-визитку и в процессе создания столкнулся со следующей.

Источник

Таблица с липкой шапкой

Инструкция как сделать липкую шапку таблицы без использования JavaScript и без jQuery. Фиксированные заголовки таблицы сделанные на чистом CSS.

Если вы занялись задачей сделать липкий заголовок таблицы и смотрели уже какие для этого решения предлагает поиск гугла, то вы видели эти портянки js-кода с идеей дублирования заголовков таблицы.

На самом деле эта типовая задача решается при помощи всего лишь трёх строчек css-кода. И это в буквальном смысле.

Вот посмотрите такое DEMO таблицы:

ID 2 3 4 5
1 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
2 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
3 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
4 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
5 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
6 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
7 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
8 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
9 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
10 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
11 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
12 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
13 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
14 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
15 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
16 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
17 Второй столбик. Третьий столбик. Четвёртый столбик. Пятый столбик.
18 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
19 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
20 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.

Ну как вам такое? Правда круто?

Эта таблица имеет самый обычный html:

Липкой шапку таблицы делает css-свойство position с установленным значением sticky . Плюс добавлены свойства top и z-index , чтобы всё работало правильно:

Так же у меня в этом блоке стилей прописаны фон шапки и цвет текста. Это для того чтобы стилизовать шапку таблицы:

Источник