0

I am trying to use nth-child in IE 7 as my css. However, it doesn't seem to support that. Is there anyway to work around it? Thanks.

my css 

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

.table tr:nth-child(even) {
background-color: #FFFFFF;
}
FlyingCat
  • 14,036
  • 36
  • 119
  • 198
  • http://stackoverflow.com/questions/7471190/how-to-get-odd-even-coloring-for-ie-and-firefox-using-css-alone – meub Aug 23 '13 at 00:45
  • The only solution is to use a javascript bases solution... where `odd` and `even` classes will be added to those elements – Arun P Johny Aug 23 '13 at 00:46
  • @ArunPJohny no JavaScript is not the only solution. Those classes can be added on the server-side for best performance, see my answer. – Community Aug 23 '13 at 01:24

3 Answers3

2

Best practice: JavaScript-free solution

Don't use JavaScript to determine styling on the client-side. It's a bad practice.

Instead, add a "odd" or "even" class on the server-side.

For example if you're using PHP to render your table from an array, here is how you would do it:

<?php
$i = 0;
foreach ($rows as $row) {
    $odd_even_class = ($i%2 == 0) ? 'even' : 'odd';
    echo '<tr class="'.$odd_even_class.'"> ... </tr>';
    $i++;
} 
?>

And then style the two classes appropriately using CSS, which will work on all browsers:

.table tr.odd {
    background-color: #FFFEE8;
}

.table tr.even {
    background-color: #FFFFFF;
}

If using JavaScript, at least avoid affecting all browsers

If you decide to go with the JavaScript solution, at least avoid the overload for browsers supporting modern CSS.

Put the JavaScript fix into a conditional statement that will prevent its execution on other browsers than IE:

<!--[if IE]>
<script>
    $(document).ready(function(){
        $('.table tr:even').addClass('even');
        $('.table tr:odd').addClass('odd');
    });
</script>
<![endif]-->

And then make sure to cover both IE and modern browsers at once in the CSS:

.table tr:nth-child(odd),
.table tr.odd {
    background-color: #FFFEE8;
}

.table tr:nth-child(even),
.table tr.even {
    background-color: #FFFFFF;
}
Community
  • 4,922
  • 7
  • 25
  • 37
1

The easy solution is to use Jquery for it.

$(document).ready(function(){
    $('table tr:even').addClass('table-even');
    $('table tr:odd').addClass('table-odd');
});

Add CSS here

.table-even{ /* your styles */ }
.table-odd{ /* your styles */ }
Hamza Dhamiya
  • 1,269
  • 1
  • 10
  • 17
  • Using JavaScript for styling is a bad practice. While I understand that it can be an easy fix, at least try to recommend a server-side solution as a preferred choice, and secondary make sure to avoid this useless JavaScript execution for browsers supporting modern CSS by suggesting the use of conditional statements like ` – Community Aug 23 '13 at 01:18
1

You can use jQuery here

$(document).ready(function(){
    $('.table tr:nth-child(odd)').addClass('odd-row');
    $('.table tr:nth-child(even)').addClass('even-row');
});

then

.table tr.odd-row {
background-color: #FFFEE8;
}

.table tr.even-row {
background-color: #FFFFFF;
}
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531