Alternate table styling to vastly improve readability

[RageGamerBoi]

As I was reading down the list for the 100th time a thought occurred to me, it could be much easier to read. And by read I mean be able to compare browsers at a glance.

How? Well as a baseline, the site currently looks like this:

That's a whole lot of whitespace with a lot of small details that are incredibly hard to discern. I personally end up spending way too much time squinting at the massive grid of tiny checks and crosses before I can gain much useful insight. I believe there are a few things that can help mitigate this:

Better row differentiation/contrast This is not perfect and still has the problem of really small icons that are hard to discern, but at least comparing between browsers becomes much easier.

To do this all you have to do is change

table.comparison-table tr:nth-child(2n+1) td {
  background-color: #eee;
}

to

table.comparison-table tr:nth-child(2n+1) td {
  background-color: #c9c9c9;
}

Colored Cell Backgrounds This one's a little harder to implement but makes judging the browsers as a whole much easier. I took inspiration from Wikipedia's colored tables for this one.

Changed CSS (example image includes previous change as well):

.good {
  color: black;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAVNJREFUKFOd0b9Lw0AUB/Cm1yKEVBFLS5J26SIdLAXrFFfHjqLgYKF/QzeRIIJKhVIR587ZQkvmLJ06dbE4GDIle2Jj0vyo3xMRFfyBBy+Xd/d5L9yFpP4wWq1WplKpZGezWcz85oHT0+m0nSTJZi6Xu8j8VPCGj6MouoJbdV23kP6uQJZlBp2PgLsw6wiXYZh70mw2sxzHHYiimLcsy6QNKFZV9RC4hzRPMSHkpF6v3xCWZTvYuIzjeK9UKj3Ytv3oOM4+1vqABcQT8Cnw3WAwiEixWGwvl8tt2gkH2xUEgQfuIBcQc2C5XC7fKooSIU+RarWq+77P4r2B2ECxhHkN4QGfAfeHw2FIMR3ENM2gVquNPc9bAd7BGr25Z+BznKs3Go3e8WsBfRiGscCXxkEQZFG0Bdzlef5a07QF3f84Pv04SZK4MAwbuIiJruvzr/hf+QtVuY51J4y/oQAAAABJRU5ErkJggg==);
  background-color: #9f9;
}
.bad {
  color: black;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAASBJREFUGFdNkMtKw0AUhk0nyV5dJZLbQgUVLaVQpll20ZVP4FJ9AR9A3PgAFt14WfkkLpIIVummRcVdAgV9gyQkfiMJOHDg/Of/zpk5I8IwlJZlTVzXTbMsS1f+HSnl2Lbta8/zvgTQbVVVh3VddylMgZeKHXLKsryhLok1waRvkh5xQAyCIHhxHMctiuIBvaNp2pthGOda0y0x7jB2Md6pdci3yGemaZ5EUfT6BzbwAPgRYFNpoA+gIwUp3Wk4ZZTkVauVR5PRaqEStus1b9qj4ZP4AdpmyaHv+7OUowFJtptg9AHmPPxYTc/z/J5al3yh6/qZ4J+uKIwa6DSO42cGLNl+ysQ+3j6XrgtGp4gNui6SJHlq36Rg/nWOXsW7/AWfSJ2DwhlOMwAAAABJRU5ErkJggg==);
  background-color: #fbb;
}
.na {
    color: black;
    font-weight: bold;
    text-align: center;
    background-color: #ffb;
}

Some kind of divider between rows might be a good idea but I think it's fine as is (and is probably more visually pleasing in either case)

Bonus! - Ability to Hide Rows and Columns This would be a great bonus feature to add regardless, but especially as there are more browsers added this will become necessary to properly compare browsers.