Table Zebra, styling TR and COL in IE9

StackOverflow https://stackoverflow.com/questions/7570435

Question

I wrote what I thought was very elegant css and table that does zebra formatting with very little bandwidth and no javascript, but it doesn't work in IE9.

How it should look:

All browsers but IE9

How it looks in IE9:

enter image description here

Source Code:

<!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>

I like elegant, low bandwidth solutions without a ton of convoluted markup. I assume that the issue is this snippet:

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

I'm assuming that all the browsers I have tested, except IE9, combine the tr and col styling, but IE9 only allows tr styling or col styling, but not both at the same time. So is there a way to code my white, light gray, and lighter gray with just three lines of CSS like I have done here that also works in IE9? Keep in mind that I don't want to have to add a bunch of class tags or style tags to my HTML either. Am I right that it is just the combining of tr and col background styling that is failing in IE9? or is something else not working in IE9? Any feedback, explanation of what's happening plus any simple solutions will be greatly appreciated.

Thanks.

Was it helpful?

Solution

can't you just use something like this:

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);
    }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top