Table Styling - класс col должен переопределять класс td. Как?

Question

Смотрите эту скрипку:

http://jsfiddle.net/uqJHf/

Я установил первый столбец для отображения на красном фоне.

Тем не менее, нечетное / четное оформление переопределяет его. Даже с добавленным! Важно;

Есть ли способ, как я могу это исправить? (без необходимости добавлять классы к

tr.row_odd td {
    background:#efefef;
}
tr.row_even td {
    background:green;
}
.col1  { background:red !important; }

<table>
<col class="col1"></col>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>

Спасибо Уэсли

Answer 1

Класс из HTML <col> не наследуется <td>, Вам нужно откорректировать HTML. Дать класс col1 к первому <td> в строке таблицы

http://jsfiddle.net/uqJHf/6/

-

<table>
    <colgroup>
        <col class="col1" />
        <col />
    </colgroup>
    <tbody>
        <tr class="row_odd">
            <td class="col1">test</td>
            <td>test</td>
        </tr>
        <tr class="row_even">
            <td class="col1">test</td>
            <td>test</td>
        </tr>
    </tbody>
</table>

Answer 2

Во-первых, давайте разберемся с разметкой. Я считаю, что <col> должен быть самозакрывающимся, поскольку он не может содержать текстовые или дочерние элементы, а также должен быть заключен в <colgroup>, Вам может даже понадобиться дополнительный <col> теги для каждого столбца (таким образом, 4 столбца означает 4 <col>"S).

<table>
    <colgroup>
        <col class="col1" />
        <col />
    </colgroup>
    <tr class="row_odd"><td>test</td><td>test</td></tr>
    <tr class="row_even"><td>test</td><td>test</td></tr>
</table>

Теперь, немного поиграв с CSS, похоже, дело в том, как CSS применяется к столбцам и <tr>"S. Если вы удалите стили, относящиеся к <tr>Вы увидите, что стиль применяется правильно.

Исходя из этого, я пришел к выводу, что стили применяются в многоуровневом подходе, вероятно, из-за того, что столбцы являются своего рода метаданными таблиц. Самый простой способ представить себе это то, что <tr> теги расположены сверху столбца, и потому что вы определили background-color для <tr> стиль колонки не просвечивает из-за непрозрачного цвета. Если вы установите <tr>"s background-color к значению RGBA вы увидите, что цвет столбцов "просвечивает".

Смотрите модификацию вашей скрипки, для демонстрации: http://jsfiddle.net/uqJHf/4/

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

РЕДАКТИРОВАТЬ: кажется, что IE9 не согласен с тем, что я сказал, он не применяет значение RGBA к <tr> если <col> имеет background-color задавать. Работает в Firefox 7, хотя...

Answer 3

td:first-child
{
    background:red !important;
}