Как вместить большие таблицы на страницы сайта
Обычно на мобильных скролбар скрыт и не совсем понятно что есть возможность прокрутить таблицу. Более лучший вариант можно сделать добавлением теней по бокам таблицы.
.big-table < overflow: auto; position: relative; >.big-table table < display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; >.scroll-right:after < content: ''; display: block; width: 15px; position: absolute; top: 0; right: 0; bottom: 0; z-index: 500; background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background-repeat: no-repeat; background-attachment: scroll; background-size: 15px 100%; background-position: 100% 0%; >.scroll-left:before
JQuery:
$(function() < $('table').wrap('box_width) < $(this).addClass('scroll-right'); >else < $(this).removeClass('scroll-right'); >>); > resize_table_box(); $( window ).on('resize', function() < resize_table_box(); >); $('.big-table table').on('scroll', function() < var parent = $(this).parent(); if ($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) < if (parent.hasClass('scroll-right') )< parent.removeClass('scroll-right'); >> else if ($(this).scrollLeft() === 0) < if (parent.hasClass('scroll-left'))< parent.removeClass('scroll-left'); >> else < if(!parent.hasClass('scroll-right'))< parent.addClass('scroll-right'); >if(!parent.hasClass('scroll-left')) < parent.addClass('scroll-left'); >> >); >);Результат:
Предыдущая запись Запись и чтение файлов в PHP
Следующая запись Адаптивные плееры Youtube на десктопах и мобильных
Комментарии 1
21 октября 2020 в 16:09
Привет мастер! Совершенно случайно попал на эту страничку и обнаружил на ней скрипт моей мечты – очень давно хотел, чтобы таблица имела что-то позволяющее понять, что есть горизонтальная прокрутка таблицы. Попробовал применить ваш замечательный Код, однако столкнулся с проблемой. Если вся конструкция расположена непосредственно на странице со статьёй, то всё работает, но стоит вынести JS во внешний файл (на моём сайте много страниц с большими таблицами), перестаёт работать эффект тени. Как-то можно побороть эту неприятность?
- Скопировать ссылку
- Пожаловаться
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
Таблица с прокруткой и фиксированным заголовком
Недавно понадобилось разместить длинную и широкую таблицу на странице. Выход только один: сделать ее скроллируемой. Основным требованием являлась возможность одновременной прокрутки таблицы по горизонтали и вертикали.
Первый вариант
Способов существует несколько, самым простым из которых является обертка таблицы в с указанием ширины (и/или высоты) и стиля: overflow:auto . Например так:
div.scroll-table
Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.
Второй вариант
Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).
Делается это так. Для начала составляем правильную структуру таблицы:
Название позиции Бренд Стоимость . . .
Подробнее про «правильные» таблицы читайте у Роджера Йохансона.
Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:
.scroll-table tr.fixed
Кроме того, важно добавить правило position:relative к блоку scroll-table , чтобы заголовок таблицы не «вылез» наверх. Это требуется только при работе в стандартном режиме (т. е. с указанием верного DOCTYPE).
Таблица 2 — в этом случае таблица прекрасно работает в IE 5/6. В остальных же браузерах она ведет себя аналогично предыдущему примеру, т. е. вполне пригодна к использованию.
. а теперь для Firefox
Обычно с этим браузером проблем гораздо меньше, чем с IE. В данном же случае, я так и не смог найти приличного решения. Способа два (по сути, это один вариант с небольшим отличием):
- Сделать таблицу фиксированной ширины — тогда заголовки фиксируются нормально
- Сделать таблицу динамической, но при этом «потерять» скроллбар при маленьком размере таблицы
Правила для Firefox выглядят примерно так:
.scroll-table>table tbody
Для начала мы спрятали это правило от IE, указав .scroll-table>table — это селектор для дочернего элемента, который IE не понимает.
Правда это не сработает для 7-ой версии IE — поэтому правильнее всего будет применить здесь conditional comments, да и вообще, хватит уже.
Далее мы указали требуемую высоту основной части таблицы tbody . И назначили ей поведение overflow:auto , отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями.
Данный способ мне кажется наиболее простым и понятным, хоть он и не лишен недостатков. Если кто-то знает лучший способ решить подобную задачу — прошу отписаться в комментариях =)
Ссылки по теме
- Способ, на котором я основывался
- Вариант с фиксированной шириной и без поддержки Оперы
- Опять же фиксированная ширина + страшный исходник
- Этот работает не совсем хорошо
Полоса прокрутки у таблицы
Из-за этой таблицы страница расширяется. Как сделать так, чтобы страница не расширялась, то есть сделать ширину отображаемого фрагмента, например, 600px и внизу у таблицы сделать полосу прокрутки? Саму таблицу сжимать нельзя, ширина и высота её строчек и столбцов не должны измениться. Как должно быть: 
Как получается: 
Это примерные скриншоты на обычной таблице.
Отслеживать
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака
задан 26 июн 2015 в 7:51
2,510 5 5 золотых знаков 31 31 серебряный знак 60 60 бронзовых знаков
Задать у контейнера фиксированную ширину ( width: 600px ) и сделать overflow: scroll .
26 июн 2015 в 7:54
Думаю вы это знаете и ваш дизайн чем-то обоснован, но все же напомню, что горизонтальная прокрутка не приветствуется в web-дизайне 🙂
26 июн 2015 в 8:13
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно задать у контейнера фиксированную ширину ( width: 600px ) и сделать overflow: scroll :
table < width: 2000px; >td < border: solid 1px; >.container
1 2 3 4 5
Отслеживать
ответ дан 26 июн 2015 в 8:02
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака
table < display: block; overflow: auto; max-width: 100%; >td
123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890 123456789012345678901234567890
Отслеживать
ответ дан 26 июн 2015 в 9:06
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.17.3574
Как сделать прокрутку страницы в html
Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.
Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll; :
class="scroll"> .scroll height: 200px; /* Высота блока */ overflow-y: scroll; /* Включаем вертикальную прокрутку */ > Теперь, если содержимое блока scroll превысит высоту блока, то появится полоса прокрутки, с помощью которой можно будет прокручивать содержимое.