Topic on Project:Support desk

Hi. I found a great table format for alternating row background color called "class-"zebra wikitable". I have tried this and no matter what browswer I view it in, the rows are all the same color... even though the samples I find, such as the below, show alternating clors in them. It does not work for me. Does anyone else have the same problem? Is there something in my css that I need to do regarding "zebra wikitable" to make it work? I saw no instructions to that effect, but I'm wondering...

See: http://qed.princeton.edu/main/Help:Zebra for an example that works but that I cannot duplicate.

Thank you.

Hey guys, I have the same issue. Any solutions in the meantime? Thank you :-)

They have a bit of code in wikibits.js to get this effect. You can get a similar effect by putting the following in your MediaWiki:Common.js page:

// Tables with class=zebra
$(document).ready(function() {
  // the "className" includes all the classes so we must use re;
  // CSS is case-sensitive anyway, so there is no point ignoring case:
  var re = /\bzebra\b/,  
    t = document.getElementsByTagName("TABLE"),
    n = t.length,
    r, nr;
  for (var i=0; i<n; i++) {
    if ( re.test(t[i].className)) {
      r = t[i].getElementsByTagName("TR");
      nr = r.length;
      for (var j=1; j < nr; j+=2) {
        if (r[j].className) { r[j].className += " stripe";}
        else r[j].className = "stripe";
      }
    }
  }
});

You'll also want to add a stripe class to your MediaWiki:Common.css page:

.stripe { background-color: red; }

You can achieve the same with CSS3 selectors: https://developer.mozilla.org/en/docs/CSS/:nth-child

I copy and pasted:

table.zebra tr.stripe { background-color: #ccc; }

and it worked

(I also used the code above, but I'm not sure if that affected it)

oops, forgot to mention that I put this in common.css