Выделите HTML-таблицу альтернативными цветами строк с помощью селектора CSS
Введение
Иногда нам приходится выделять чередующиеся строки HTML-таблицы, чтобы привлечь внимание пользователя к важным данным. Есть много способов выделить чередующиеся строки, но самый простой способ — использовать селектор стилей CSS, который не требует никакого кода сценариев, такого как JavaScript или jQuery.
CSS предоставляет селектор nth-child(), который поддерживает ключевое слово нечетное и четное. Он также поддерживает арифметические операторы
Синтаксис
- :nth-child(number) {
- объявлений css;
- }
Использование селектора
Мы можем использовать селектор :nth-child вместе с HTML-тегами.
- // нечетное ключевое слово
- th:nth-child(нечетный) {
- фон: красный;
- }
- //четное ключевое слово
- p:nth-child(even) {
- фон: синий;
- }
- // арифметический оператор
- p:nth-child(4n+0) {
- фон: синий;
- }
Пример
Предположим, что у нас есть таблица сотрудников, и мы хотим выделить чередующиеся строки
Шаг 1. Создание стиля CSS
Определите следующую таблицу стилей в разделе заголовка HTML-страницы, используя селектор nth-child для таблицы.
- <стиль>
- таблица {
- семейство шрифтов: arial, без засечек;
- граница-коллапс: коллапс;
- ширина: 100 %;
- }
- тд, т {
- граница: 2 пикселя сплошная #DFFF00;
- выравнивание текста: по левому краю;
- отступ: 8 пикселей;
- }
- tr:nth-child(even) {
- цвет фона: #DFFF00;
- }
Шаг 2. Создайте HTML-таблицу
Employee
- <таблица>
-
Имя Город Адрес -
Витал Вадже Латур Индия -
Судхир Вадже Пуна Индия -
Вишал Нью-Йорк США -
Капил Лондон Великобритания
Вывод приведенного выше кода будет выглядеть следующим образом:
Резюме
Я надеюсь, что этот блог был полезен для изучения того, как выделять альтернативные строки таблицы HTML с помощью CSS. Если у вас есть какие-либо предложения, пожалуйста, отправьте их, используя поле для комментариев.
- HTML
- CSS
- Таблица Html
- Селектор css
- JavaScript
- jQuery
Следующая рекомендуемая литература Как экспортировать HTML-таблицу в Excel с помощью плагина jQuery
css — Как изменить цвет фона в заголовке таблицы и исправить заголовок в HTML без JavaScript?
спросил
Изменено 4 года, 6 месяцев назад
Просмотрено 27 тысяч раз
Я пытался использовать это, но это не сработало.
.заголовок { положение: фиксированное; сверху: 0; ширина: 100%; }
- html
- css
Если следующий макет вашей основной таблицы:
Здесь что-то есть |
---|
Строка 1 |
Ряд 2 |
Строка 3 |