Ma table (qui fonctionne parfaitement sur Chrome, FireFox et Opera) ne s'affiche pas correctement sur Internet Explorer.
Le fond reste blanc! (J'utilise IE-8)
code CSS:
/*My Table*/
.my_table{
border-collapse:collapse;
font:normal 14px sans-serif,tahoma,arial,verdana;
margin:5px 0;
}
.my_table th{
color:#fff;
background:#5E738A;
border:1px solid #3C5169;
text-align:center;
padding:4px 10px;
}
.my_table td{
color:#555;
border:1px solid #C1CAD4;
text-align:center;
padding:2px 5px;
}
.my_table tr:nth-child(even){
background:#E6EDF5;
}
.my_table tr:nth-child(odd){
background:#F0F5FA;
}
IE8 ne prend pas en charge le nth-child
sélecteur j'ai peur:
Comme bonne solution de contournement, jQuery a ajouté ceci à leur projet et y parvenir en utilisant JavaScript est acceptable:
Pour mon CSS, j'aurais
.my_table tr.even{
background:#E6EDF5;
}
.my_table tr.odd{
background:#F0F5FA;
}
Et j'utiliserais jQuery pour ce faire:
$(document).ready(function() {
$(".my_table tr:nth-child(even)").addClass("even");
$(".my_table tr:nth-child(odd)").addClass("odd");
});
C'est un problème IE8 (et IE avant) et ce lien montre une bonne solution:
http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere
Vous pouvez utiliser first-child et "+" pour émuler nth-child, par exemple:
tr > td:first-child + td + td + td + td + td + td + td + td {
background-color: red;
}
Qui sélectionne la 9ème colonne, tout comme nth-child (9), et qui fonctionne sur IE
J'ai fait il y a quelque temps, une solution javascript simple et prude pour ce problème :
https://Gist.github.com/yckart/5652296
var nthChild = function (elem, num) {
var len = elem.length;
var ret = [];
var i = 0;
// :nth-child(num)
if (!isNaN(Number(num))) {
for (i = 0; i < len; i++) {
if (i === num - 1) return elem[i];
}
}
// :nth-child(numn+num)
if (num.indexOf('+') > 0) {
var parts = num.match(/\w/g);
for (i = parts[2] - 1; i < len; i += parts[0] << 0) {
if (elem[i]) ret.Push(elem[i]);
}
}
// :nth-child(odd)
if (num === 'odd') {
for (i = 0; i < len; i += 2) {
ret.Push(elem[i]);
}
}
// :nth-child(even)
if (num === 'even') {
for (i = 1; i < len; i += 2) {
ret.Push(elem[i]);
}
}
return ret;
};
L'utilisation est assez simple et similaire au sélecteur css:
var rows = document.querySelectorAll('li');
var num = nthChild(rows, 2);
var formula = nthChild(rows, '3n+1');
var even = nthChild(rows, 'even');
var odd = nthChild(rows, 'odd');
// Note, forEach needs to be polyfilled for oldIE
even.forEach(function (li) {
li.className += ' even';
});
odd.forEach(function (li) {
li.className += 'odd';
});
formula.forEach(function (li) {
li.className += ' formula';
});
num.style.backgroundColor = 'black';
Ceci est la version Dojo, cela fonctionne très bien:
dojo.addOnLoad(function(){
dojo.query("table tr:nth-child(odd)").addClass("odd");
dojo.query("table tr:nth-child(even)").addClass("even");
});