Таблица Zebra, стилизация TR и COL в IE9

Я написал то, что я считал очень элегантным css и таблицей, которая выполняет форматирование зебры с очень небольшой пропускной способностью и без javascript, но это не работает в IE9.

Как это должно выглядеть:

Все браузеры, кроме IE9

Как это выглядит в IE9:

введите здесь описание изображения

Исходный код:

<!DOCTYPE html>
<html>
<head>
    <title>SQLFlight HD Status</title>
    <style type="text/css">
    table {
        border-collapse:collapse;
        border-spacing:0;               
    }
    th {
        background:black;
        color:white;
    }
    tr:nth-child(odd), col:nth-child(odd) {
        background:rgba(200,200,200,0.5);
    }
    tr:nth-child(even) {
        background:rgba(255,255,255,0.5);
    }
    td,th {
        padding: 4px 10px;
    }
    </style>
    </head>
<body>
    <table>
    <col/><col/><col/><col/><col/><col/>
    <thead>
        <tr>
        <th>Drive</th><th>Label</th><th>Size</th><th>Used</th><th colspan="2">Free</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>C:</td><td>OS</td><td>136 GB</td><td align="right">74 GB</td>
        <td align="right">62 GB</td><td align="right">46 %</td>
        </tr>
        <tr>
        <td>E:</td>
        <td>Data2</td>
        <td>394 GB</td>
        <td align="right">280 GB</td>
        <td align="right">114 GB</td>
        <td align="right">29 %</td>
        </tr>
        <tr>
        <td>F:</td><td>Data3</td><td>164 GB</td><td align="right">100 GB</td><td align="right">64 GB</td><td align="right">39 %</td>
        </tr>
    </tbody>
    </table> 
    </body>
</html>

Мне нравятся элегантные решения с низкой пропускной способностью без тонны запутанной разметки. Я предполагаю, что проблема заключается в этом фрагменте:

tr:nth-child(odd), col:nth-child(odd) {
    background:rgba(200,200,200,0.5);
}

Я предполагаю, что все браузеры, которые я тестировал, кроме IE9, сочетают стили tr и col, но IE9 допускает только стили tr или col, но не оба стиля одновременно. Итак, есть ли способ закодировать мой белый, светло-серый и светло-серый с помощью всего трех строк CSS, как я сделал здесь, который также работает в IE9? Имейте в виду, что я также не хочу добавлять кучу тегов классов или тегов стилей в свой HTML. Прав ли я, что это просто сочетание стилей фона tr и col, которое не работает в IE9? или что-то еще не работает в IE9? Любая обратная связь, объяснение того, что происходит, а также любые простые решения будут высоко оценены.

Спасибо.


css background col tablerow internet-explorer-9
person Robert Louis Murphy    schedule 27.09.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

вы не можете просто использовать что-то вроде этого:

tr:nth-child(odd) {
        background:rgba(200,200,200,0.5);
    }
tr:nth-child(odd) td:nth-child(even) {
        background:rgba(200,200,200,0.8);
    }
tr:nth-child(even) td:nth-child(even) {
        background:rgba(255,255,255,0.5);
    }
person Gerben    schedule 27.09.2011
comment
Да, это работает. Я хотел бы знать, не работает ли мой первоначальный подход в IE9 из-за ошибки или из-за того, что стили tr должны заменить стили col при определении стиля tr. Я просто ненавижу добавлять дополнительный код только для IE. - person Robert Louis Murphy; 27.09.2011
comment
Я думаю, что реализация IE на самом деле не рассматривает tr как видимый элемент, а скорее как элемент-контейнер, такой как thead и tbody. Таким образом, он реализует фон, установленный на TR, помещая этот фон на содержащий td, если только фон td уже не установлен CSS. Это мое предположение. Кроме того, я не думаю, что IE ошибается, а Chrome прав. Я думаю, что спецификация оставляет место для этих различий в реализации. - person Gerben; 27.09.2011