Условные альтернативные стили строк таблицы

Question

Можно ли стилизовать строки альтернативной таблицы без определения классов для альтернативных тегов <tr>?

С помощью следующей таблицы может ли CSS определять альтернативные стили строк БЕЗ необходимости присваивать альтернативным строкам класс "row1 / row2"? row1 может быть по умолчанию, поэтому проблема в row2.

<style>
.altTable td { }
.altTable .row2 td { background-color: #EEE; }
</style>

<table class="altTable">
 <thead><tr><td></td></tr></thead>
 <tbody>
  <tr><td></td></tr>
  <tr class="row2"><td></td></tr>
  <tr><td></td></tr>
  <tr class="row2"><td></td></tr>
 </tbody>
</table>

Answer 1

tr:nth-child(even) { background: #FFF; }
tr:nth-child(odd) { background: #EEE; }

Не работает в IE, но это чисто презентационная вещь, контент все равно будет работать нормально, поэтому я не думаю, что это огромная проблема - в зависимости от процента постоянных пользователей IE на вашем сайте.

Answer 2

Да! Вы можете сделать это с чистым CSS и без классов в браузерах, которые поддерживают селектор «+» CSS:

.altTable tr td,
.altTable tr+tr+tr td,
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; }

.altTable tr+tr td,
.altTable tr+tr+tr+tr td,
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; }

Вероятно, не лучший подход, но выполнимый.

Если вы не возражаете против небольшого Javascript, jQuery дает вам очень кратко:

$('.altTable tr:odd').addClass('odd');

Answer 3

Дайте класс row2 для tbody, а затем задайте стиль для альтернативных рядов с помощью класса row1. Другие строки будут наследовать класс row2 от тела.

<style>
.row1 { color: red }
.row2 { color: blue }
</style>

<table class="altTable">
 <thead><tr><td></td></tr></thead>
 <tbody class="row2">
  <tr class="row1"><td>row 1</td></tr>
  <tr><td>row 2</td></tr>
  <tr class="row1"><td>row 1</td></tr>
  <tr><td>row 2</td></tr>
 </tbody>
</table>