Topic on Project:Support desk

Jump to navigation Jump to search

[RESOLVED] Zebra wikitable: Not alternating colors

Vikkiwiki (talkcontribs)

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: for an example that works but that I cannot duplicate.

Thank you. (talkcontribs)

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

MarkAHershberger (talkcontribs)

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; } (talkcontribs)

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) (talkcontribs)

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

Reply to "[RESOLVED] Zebra wikitable: Not alternating colors"