Как сделать горизонтальную прокрутку таблицы на сайте
Бывает, что при создании мобильной версии сайта, нужно сделать так, чтобы таблица была хорошо видна, но при этом она настолько большая, что ее не уменьшить до размеров экрана мобильного устройства так, чтобы было нормально видно все ее ячейки.
В этом случае выручит горизонтальная прокрутка таблицы, так будет намного лучше видно ее содержимое.
Сделать горизонтальную прокрутку таблицы очень просто, достаточно знать алгоритм работы такой верстки, ну а написать стили, это уже совсем просто.
Настройка
Для того, чтобы у таблицы появилась горизонтальная прокрутка, ей нужно задать фиксированную ширину и поместить внутри родительского блока, у которого ширина будет изменяться.
Создаем родительский блок с классом table-wrap , задаем ему максимальную ширину равную ширине таблицы, простую ширину делаем 100%, атрибут overflow ставим в auto.
Затем внутри него создаем таблицу с классом table и фиксированной шириной.
Вид услуги Ед. изм. Цена (руб.) Кол-во посещений Консультация психолога Посещение от 2000 руб. 1 Консультация гастроэнтеролога Посещение от 5000 руб. 1
.table-wrap < max-width: 800px; width: 100%; overflow: auto; >.table
| Вид услуги | Ед. изм. | Цена (руб.) | Кол-во посещений |
|---|---|---|---|
| Консультация психолога | Посещение | от 2000 руб. | 1 |
| Консультация гастроэнтеролога | Посещение | от 5000 руб. | 1 |
При ширине страницы 1000px и более прокрутки видно не будет, при уменьшении размера страницы по ширине, у таблицы появится горизонтальная прокрутка.
Настройка внешнего вида таблицы создается с помощью дополнительных стилей.
Как видите все просто, используйте этот способ в своих работах и создавайте качественный контент.
Создание таблицы HTML с вертикальной прокруткой внутри тега tbody
HTML и CSS предоставляют нам множество инструментов для создания и стилизации веб-элементов. Однако, иногда нам приходится сталкиваться с задачами, которые кажутся простыми на первый взгляд, но оказываются сложными при попытке их реализовать.
Одна из таких задач — создание таблицы с вертикальной прокруткой внутри тега . Возможно, вы захотите создать таблицу, которая бы занимала 100% ширины экрана, но при этом имела бы ограниченную высоту для тела таблицы ( ), с возможностью вертикальной прокрутки. Это может быть полезно, когда у вас в таблице много строк, и вы не хотите, чтобы она занимала слишком много места на странице.
Вот базовый пример такой таблицы:
Заголовок 1 Заголовок 2 Данные 1 Данные 2
Чтобы добавить прокрутку, можно воспользоваться свойством overflow: auto в CSS. Однако, просто применить это свойство к тегу не приведет к желаемому результату. Это связано с тем, что по умолчанию является блочным элементом, и свойство overflow не работает с такими элементами.
Вместо этого, мы можем применить некоторые дополнительные CSS-стили, чтобы заставить его работать:
table < width: 100%; >thead, tbody tr < display: table; width: 100%; >tbody
В этом примере мы задаем стиль display: block , чтобы сделать его блочным элементом, а затем применяем overflow: auto , чтобы добавить прокрутку. Обратите внимание, что мы также задаем высоту для , иначе прокрутка не будет работать.
Таким образом, можно создать таблицу с вертикальной прокруткой внутри , используя только HTML и CSS, без необходимости добавлять дополнительные элементы или использовать JavaScript.
Полоса прокрутки для части таблицы
Полоса прокрутки
Помогите плиз! Вот мой сайт — http://candywonderland.narod.ru/ Видите,нижняя полоса прокрутка.
Полоса прокрутки
Здравствуйте! Сайт на Битриксе. Нужно реализовать полосу прокрутки для новостей. Не уверена, что.
Полоса прокрутки
После того как закрепила фоновый рисунок, чтоб никуда не сьезжал. Пропала прокрутка, при уменьшении.
Полоса прокрутки
Доброго времени суток, такая ситуация. Практикую понемногу сайтостроение посредством редактирования.
Регистрация: 07.10.2013
Сообщений: 66
Одной таблицей никак. Таблица строится построчно. Так что придется все разделить.
Регистрация: 17.10.2012
Сообщений: 289
Разбил на 2 таблицы, создал 3-ю таблицу и 2 колонки и вставил в каждую колонку таблицу. Все как-то криво получается, слазит, адаптивным не делается. Хелп.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
TABLE { float: left; //width: 300px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } .chetvet_chasa{ width: 1px; /* Ширина ячейки */ } .tri_chasa{ width: 12px; /* Ширина ячейки */ } td { height: 20px; } .one{ width:10%; } .two{ width:90% ; } .container { width: 85%; overflow: scroll; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
table > td> tr> table border="1" class="one"> tr> td>Часыtd> tr> $sql = "SELECT `nameKvartiry` FROM `kvartiry`"; $result = mysqli_query($connection, $sql); while ($aray_kv = mysqli_fetch_array($result)): ?> tr> td> echo $aray_kv['nameKvartiry']; ?> td> tr> endwhile; ?> tr> td>Датыtd> tr> table> td> td> div class="container"> table border="1" class="two"> tr> for ($j = 0; $j 240; $j++): ?> td colspan="12"> 01 td> endfor; ?> tr> $sql = "SELECT `nameKvartiry` FROM `kvartiry`"; $result = mysqli_query($connection, $sql); while ($aray_kv = mysqli_fetch_array($result)): ?> tr> for ($m = 0; $m 2880; $m++): ?> td class="chetvet_chasa">td> endfor; ?> tr> endwhile; ?> tr> for ($j = 0; $j 31; $j++): if ($j == 0 or $j == 30) { $kol = 48; } else { $kol = 96; } ?> td colspan="$kol; ?>"> 01 td> endfor; ?> tr> table> div> td> tr> table>
Прокрутка содержимого таблицы
Чтобы сделать таблицу с фиксированной высотой и вертикальной прокруткой потребуется разделить её на две части. В первой будет заголовок таблицы, во второй части, тело в контейнере со свойством overflow-x: auto .
Название блюда Белки Жиры Углеводы Ккал Азу 11,9 14,2 10,2 214 CSS-стили:
.scroll-table-body < height: 300px; overflow-x: auto; margin-top: 0px; margin-bottom: 20px; border-bottom: 1px solid #eee; >.scroll-table table < width:100%; table-layout: fixed; border: none; >.scroll-table thead th < font-weight: bold; text-align: left; border: none; padding: 10px 15px; background: #d8d8d8; font-size: 14px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; >.scroll-table tbody td < text-align: left; border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 10px 15px; font-size: 14px; vertical-align: top; >.scroll-table tbody tr:nth-child(even) < background: #f3f3f3; >/* Стили для скролла */ ::-webkit-scrollbar < width: 6px; >::-webkit-scrollbar-track < box-shadow: inset 0 0 6px rgba(0,0,0,0.3); >::-webkit-scrollbar-thumb