Стилизация определенных столбцов и строк

Question

Я пытаюсь стилизовать некоторые специфические части создаваемой таблицы 5х4. Должно быть так:

1. Каждый ряд с четным номером и каждый ряд с нечетным номером должен иметь свой цвет.
2. Текст во втором, третьем и четвертом столбцах следует центрировать.

У меня есть эта таблица:

<table>
<caption>Some caption</caption>
<colgroup>
  <col>
  <col class="value">
  <col class="value">
  <col class="value">
</colgroup>
<thead>
  <tr>
    <th id="year">Year</th>
    <th>1999</th>
    <th>2000</th>
    <th>2001</th>
  </tr>
</thead>
<tbody>
  <tr class="oddLine">
    <td>Berlin</td>
    <td>3,3</td>
    <td>1,9</td>
    <td>2,3</td>
  </tr>
  <tr class="evenLine">
    <td>Hamburg</td>
    <td>1,5</td>
    <td>1,3</td>
    <td>2,0</td>
  </tr>
  <tr class="oddLine">
    <td>München</td>
    <td>0,6</td>
    <td>1,1</td>
    <td>1,0</td>
  </tr>
  <tr class="evenLine">
    <td>Frankfurt</td>
    <td>1,3</td>
    <td>1,6</td>
    <td>1,9</td>
  </tr>
</tbody>
<tfoot>
  <tr class="oddLine">
    <td>Total</td>
    <td>6,7</td>
    <td>5,9</td>
    <td>7,2</td>
  </tr>
</tfoot>
</table>

И у меня есть этот CSS-файл:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0px 5px;
}

#year {
    text-align: left;
}

.oddLine {
    background-color: #DDDDDD;
}

.evenLine {
    background-color: #BBBBBB;
}

.value {
    text-align: center;
}

И это не работает. Текст в столбцах не центрирован. В чем здесь проблема? И есть ли способ ее решить (кроме изменения класса всех ячеек, центрируемых по моему желанию)?

П.С .: Я думаю, что есть некоторые помехи классам .evenLine и .oddLine. Потому что, когда я помещаю "background: black" в класс "value", он меняет цвет фона столбцов в первой строке. Дело в том, что если я удаляю эти два класса, выравнивание текста все равно не работает, но атрибут background работает отлично. Argh ...

Answer 1

Используйте псевдо-классы CSS.

tr:nth-child(even){
    background: #EEEEEE;
}
tr:nth-child(odd) {
    background: #FFFFFF;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
    text-align: center;
}

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

Редактировать: исправлена ​​последняя строка от tr до td и вот скрипка

Чтобы ответить, почемуваш код не работает, W3schools имеет ответ.

"Примечание. Firefox, Chrome и Safari поддерживают только атрибуты span и width элемента colgroup.

Добавьте атрибут style к тегу, и пусть CSS позаботится о фонах, ширине и границах. Это ЕДИНСТВЕННЫЕ свойства CSS, которые работают с тегом. "

Таким образом, выравнивание текста не имеет никакого эффекта.Colgroup слишком стар.Ты должен разобраться с человеком времени: P