CSS Адаптивна (чутлива) таблиця
Адаптивна таблиця
В адаптивній таблиці буде відображатися горизонтальна смуга прокрутки, якщо екран занадто малий для відображення всього змісту:
| Ім’я | Прізвище | Бали | Бали | Бали | Бали | Бали | Бали | Бали | Бали | Бали | Бали | Бали | Бали |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Додайте елемент контейнера (наприклад, <div>) за допомогою overflow-x:auto навколо елементу <table> щоб зробити його адаптивним:
Примітка: В OS X Lion (на Mac) смуги прокрутки за замовчуванням приховані та відображаються лише при використанні (навіть якщо встановлено "overflow:scroll").
Більше прикладів
Зробити красиву таблицю
Цей приклад демонструє, як створити красиву таблицю.
Встановити положення заголовку таблиці
Цей приклад демонструє, як розмістити заголовок таблиці.
Перевірте себе за допомогою вправ!
CSS Властивості таблиці
| Властивість | Опис |
|---|---|
| border | Встановлює всі властивості межі в одній об’яві |
| border-collapse | Вказує, чи повинні бути згорнуті межі таблиці |
| border-spacing | Задає відстань між межами сусідніх чарунок |
| caption-side | Задає розміщення заголовка таблиці |
| empty-cells | Вказує, чи слід відображати межі та фон в пустих чарунках таблиці |
| table-layout | Встановлює алгоритм компонування (макет), що буде використовуватися для таблиці |
