CSS для заголовков таблиц, даже нечетные строки?

Question

Структура моей таблицы выглядит следующим образом:

<table>
 <thead>
   <tr class="navigation">
   </tr>
 </thead>
 <thead>
   <tr class="headers">
   </tr>
 </thead>
 <tbody>
  <tr class="even">
    <td><a href="#"/></td>
  </tr>
  <tr class="odd">
  </tr>
  </tr>
 </tbody>
</table>

Я определил следующий CSS, как можно применять классы "навигация", "заголовок", "четный", "нечетный" в моем CSS? Как определить их отношение к классу «таблица», как «table.even», «table.odd»? спасибо

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    #margin: 45px;
    width:100%;
    text-align: left;
    border-collapse: collapse;  
}

Answer 1

Более простой и не нужен класс:

tbody tr:nth-child(odd) {
    put your style here...
}

tbody tr:nth-child(even) {
    put your style here...
}

Я надеюсь помочь!

Answer 2

Ссылка на класс родительского элемента или сам родительский элемент возможна только в том случае, если необходимо использовать имя класса для более чем одного типа элемента. Например, это:

.navigation { font-weight:bold }

... вместо этого:

tr.navigation { font-weight:bold }

Это сократит время загрузки, когда браузер отображает страницу.

Ссылка: Оптимизировать отображение в браузере [Google Code]

Answer 3

вы бы использовали

table thead tr.navigation {}
table thead tr.headers {}
table tbody tr.even {}
table tbody tr.odd {}

Answer 4

Применение класса к любому элементу позволяет вам сделать следующее:

element.className { rules }

Таким образом, с вашим TR вы можете сделать следующее:

tr.navigation { font-weight:bold }

Итак, создавая зебру-строки на ваши шансы и строки событий можно сделать так:

tr.odd  { background-color:#FFF; }
tr.even { background-color:#CCC; }