Чередование цвета строк таблицы с помощью CSS?

Question

Описание проблемы:

Я использую таблицу с чередующимися цветами строк, как показано ниже:

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

В данном случае я использую класс для <tr>, но хочу применить класс только к <table>. Когда я применяю класс к таблице, он влияет на строки <tr>, и мне это не нужно.

Могу ли я написать свой HTML следующим образом, используя CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
</table>

Как я могу добиться эффекта "зебры" для строк, используя только CSS?

Answer 1

В вашем вопросе представлено несколько примеров стилизации таблицы с использованием как jQuery, так и чистого CSS. Вы правы, что в CSS существует псевдокласс nth-child, который позволяет выделять строки таблицы по их порядковому номеру.

Пример с использованием чистого CSS:

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

Этот стиль применит синий цвет фона и белый текст к нечетным строкам таблицы (tr). Для четных строк можно использовать вот такое правило:

tr:nth-child(even) {
  background-color: #000000;
}

Однако стоит отметить, что поддержка nth-child в Internet Explorer 8 отсутствует.

Если вам нужен аналогичный эффект с использованием jQuery, вы можете сделать это следующим образом:

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

В этом коде все нечетные строки (tr:odd) получают черный цвет фона и белый цвет текста.

Также вы можете использовать tr:even для четных строк, как в следующем примере:

$(document).ready(function() {
  $("tr:even").css("background-color", "#000000");
});

Таким образом, если вы хотите, чтобы ваш код работал в современных браузерах и, при этом, поддерживал IE 8, советую использовать чистый CSS. Если же вы хотите использовать jQuery, то ваш код также полностью функционален, но помните о несовместимости с IE 8.

Answer 2

Просто добавьте следующий код в ваш HTML (внутри <head>), и вы закончите.

HTML:

<style>
    tr:nth-of-type(odd) {
        background-color: #ccc;
    }
</style>

Это проще и быстрее, чем примеры с использованием jQuery.

Answer 3

Чтобы задать чередование цветов строк в таблице, можно использовать как CSS, так и jQuery.

Использование CSS

Вы можете задать разные цвета для нечетных и четных строк таблицы с помощью псевдоклассов nth-child:

table tr:nth-child(odd) td {
    background: #ccc; /* Цвет для нечетных строк */
}
table tr:nth-child(even) td {
    background: #fff; /* Цвет для четных строк */
}

Использование jQuery

Если вы предпочитаете использовать jQuery, можно сделать это следующим образом:

$(document).ready(function() {
    $("table tr:odd").css("background", "#ccc"); // Цвет для нечетных строк
    $("table tr:even").css("background", "#fff"); // Цвет для четных строк
});

Пример таблицы

Вот как может выглядеть ваша таблица с применением вышеуказанных стилей:

<table>
    <tr>
        <td>One</td>
        <td>one</td>
    </tr>
    <tr>
        <td>Two</td>
        <td>two</td>
    </tr>
</table>

С помощью этих методов вы сможете настроить цвета строк в таблице для лучшей читаемости.

Answer 4

Большинство из упомянутых выше кодов не будет работать в Internet Explorer. Вот решение, которое будет корректно отображаться как в IE, так и в других браузерах:

<style type="text/css">
   tr:nth-child(2n) {
       background-color: #FFEBCD;
   }
</style>

Таким образом, данное CSS правило будет менять цвет фона для четных строк таблицы. Убедитесь, что вы используете правильный DOCTYPE и проверьте поддержку CSS в вашей версии IE.

Answer 5

Вы можете использовать следующий код JavaScript, чтобы добавить классы к четным и нечетным строкам таблицы с классом alternate_color. Это делается с помощью библиотеки jQuery.

Вот пример скрипта:

<script type="text/javascript">
$(function(){
  // Добавляем класс "d0" к четным строкам
  $("table.alternate_color tr:even").addClass("d0");
  // Добавляем класс "d1" к нечетным строкам
  $("table.alternate_color tr:odd").addClass("d1");
});
</script>

В этом коде используется селектор :even для выбора четных строк и :odd для нечетных, после чего к соответствующим строкам добавляются классы d0 и d1. Это удобно для стилизации таблиц, например, для чередования цветов строк. Не забудьте подключить библиотеку jQuery перед этим скриптом, чтобы он работал корректно.

Чередование цвета строк таблицы с помощью CSS?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных