HTML Таблицы моделирование
Используйте CSS моделирование, чтобы ваши таблицы выглядели лучше.
Горизонтальные полосы
Если вы добавите цвет фона в каждую вторую строку таблицы, вы получите красивый эффект полосок зебры.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Чтобы оформить любой другой элемент строки таблицы, используйте селектор :nth-child(even) следующим образом:
tr:nth-child(even) {
background-color: #D6EEEE;
}
Попробуйте сами »
Примечание: Если вы используете (odd) вместо (even), стилизация будет происходить в строке 1,3,5 и т.д. вместо 2,4,6 и т.д.
Вертикальные полосы
Чтобы сделать вертикальные полосы зебры, оформите каждый второй столбец вместо каждой другой строки.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Установите :nth-child(even) для элементов данных таблицы, подобных этому:
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Попробуйте сами »
Примечание: Поместите селектор :nth-child() на оба элемента th и td, если вы хотите использовать стиль как для заголовков, так и для обычных ячеек таблицы.
Комбинироване вертикальных и горизонтальных полос
Вы можете комбинировать стили из двух приведенных выше примеров, и у вас будут полосы в каждой другой строке и в каждом другом столбце.
Если вы используете прозрачный цвет, вы получите эффект перекрытия.
Используйте rgba(), чтобы указать прозрачность цвета:
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Попробуйте сами »
Горизонтальные разделители
| Имя | Фамилия | Сбережения |
|---|---|---|
| Андрей | Щипунов | $100 |
| Сергей | Щипунов | $150 |
| Татьяна | Щипунова | $300 |
Если вы укажете границы только в нижней части каждой строки таблицы, у вас будет таблица с горизонтальными разделителями.
Добавьте свойство border-bottom ко всем элементам tr для получения горизонтальных разделителей:
tr {
border-bottom: 1px solid #ddd;
}
Попробуйте сами »
Таблица с возможностью перемещения
Используйте селектор :hover в tr, чтобы выделить строки таблицы при наведении курсора мыши:
| Имя | Фамилия | Сбережения |
|---|---|---|
| Андрей | Щипунов | $100 |
| Сергей | Щипунов | $150 |
| Татьяна | Щипунова | $300 |
tr:hover {background-color: #D6EEEE;}
Попробуйте сами »