Как изменить цвет нескольких столбцов в HTML-таблице

Question

У меня есть таблица html, и я использую альтернативные цвета строк (белый и серый).

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

Есть ли кто-нибудь, кто может придумать решение, в котором я могу изменить эти столбцы на зеленый, но при этом все еще сохранить этот альтернативный цветвлияет на эти столбцы?

Answer 1

Как насчет этого?

<table border="1">
    <tr class="even">
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td class="special">stuff</td>
        <td class="special">stuff</td>
        <td>stuff</td>        
    </tr>
    <tr class="even">
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td class="special">stuff</td>
        <td class="special">stuff</td>
        <td>stuff</td>        
    </tr>
</table>

---

.odd{
    background-color: gray;   
}

.special{
    background-color: #9999ff;   
}

.odd .special{
    background-color: #7777ff;   
}​

http://jsfiddle.net/ycdSr/

Просто сделайте пересечение цветом, похожим на оба цвета вместе взятых.

Answer 2

Вместо светлых цветов можно использовать темные цвета со значением прозрачности, поэтому серый фон будет, например, черным с прозрачностью 90%, а зеленый - темно-зеленым с прозрачностью 80% (значения rgba для современных браузеров или png изображения с исправлением IE6 для старых браузеров).

Таким образом, зеленый столбец будет показывать серый фон под ним, делая его немного темнее зеленого на серых рядах.

Редактировать: В качестве теста в современном браузере вы можете использовать, например, rgba(0,0,0,0.2) в качестве значения серого и rgba(0,255,0,0.3) в качестве значения зеленого. Просто посмотрите, как это выглядит, и если это работает, вы можете исправить это и в старых браузерах.

Дополнительная информация о поддержке браузера для rgba.

И заставить его работать в IE8- .

Answer 3

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

Answer 4

хорошо, если вы дадите им класс, вы должны также дать классу правильные атрибуты и значения CSS, как говорит Авитус