CSS table alternate colors

Question

is there a version of css3 code below that will work in all browers?

table tr:nth-child(odd) { background-color: #ccc; }

Answer 1

Not unless you modify the DOM (e.g. to add a class to every other row), either in the original markup or with JS after the content has loaded. (Even then it still won't support all browsers, as not all browsers support CSS, and not all that do have it turned on).

Answer 2

No.

You have at least two options, though:

1. Manually apply a style to the odd (and/or) even rows and then style those appropriately: tr.odd {background-color: #ccc; }

2. Use JS (I'd suggest jQuery): $('tr:nth-child(odd)').css('background-color','#ccc'); or $('tr:nth-child(odd)').addClass('odd') (either of these would need to be in a $(document).ready(); (or equivalent) though, obviously).

Answer 3

If you are using JSTL, a variation of this will work (not straight CSS, I know, but it works with Microsoft Internet Explorer 6.0):

<c:forEach items="${yourList}" var="item" status="status">
    <c:choose>
        <c:when test="${(status / 2) == 0}">
            <c:set var="rowClass" value="evenClass"/>
        </c:when>
        <c:otherwise>
            <c:set var="rowClass" value="oddClass"/>
        </c:otherwise>
    </c:choose>
    <tr class="${rowClass}">
        ...
    </tr>
</c:forEach>