Home/ Questions/Q 6633693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:50:34+00:00

I wrote what I thought was very elegant css and table that does zebra

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
    }
    • 0