user89

Таблица. Фиксированный заголовок, столбец. Покритикуйте код.

Recommended Posts

Здравствуйте! Всем известно, что в Excel можно зафиксировать области так, что при прокрутке содержимого таблицы, сторока и столбец оставались на месте. Решил сделать нечто подобное и для HTML.

В гугле полно примеров, но большинство из них очень громоздки или используют jQuery и прочие библиотеки. А мне хотелось как-нибудь попроще, без JavaScript, на одном CSS.

Если фиксировать что-нибудь одно, то скрипт не нужен, например для заголовка http://jsfiddle.net/2Bfxm/3/

Но одновременно и для столбца, не получится без JavaScript. Впрочем, он небольшой.

Пример работает в Опере, Мозилле, Хромом, IE8-9  http://jsfiddle.net/bS3wf/

Маленький недостаток - в IE8-9 при прокрутке, немного дергается заголовок или столбец.

Edited by user89

Share this post


Link to post
Share on other sites

Есть еще один недостаток: при неизвестной ширине колонок это всё не будет работать.

Да. Это так. Просто не нашел другого пути...

Share this post


Link to post
Share on other sites

Забыл опубликовать новую версию. Теперь наверное без недостатков :)

Действительно получилось универсальное и простое, также успешно работает с объединёнными ячейками. На входе имеем обычную таблицу, области фиксируются вызовом функции
FixHeaderCol(<таблица>, <сколько фиксировать строк>, <сколько фиксировать столбцов>, <ширина таблицы>, <высота таблицы>)

 

Демо https://jsfiddle.net/axeqojwu/2/embedded/result/
Исходники https://jsfiddle.net/axeqojwu/2/
Не знаю, будет ли колёсико мыши работать в Сафари.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By azaqwerty
      Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта 




    • By Marking
      проблема в том, что если я пишу путь так(через /) :
      <script src="/js/mainjs.js"></script> то гугл сообщает об ошибке, якобы файл не найден. Хотя файл html и папка js лежат в одном файле.
      как быть?
      PS если указать полный путь к js то все работает. 
  • Member Statistics

    46,514
    Total Members
    3,128
    Most Online
    e1pavlovitch
    Newest Member
    e1pavlovitch
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.