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);
}

Попробуйте сами »