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

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

<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>.Если вы удалите стили, относящиеся к <tr>, вы увидите, что стиль применяется правильно.

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

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

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

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

Answer 2

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

Answer 3

Класс из 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>