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.

[davidcollini]

I do like how the colored boxes increase readability, but personally I believe it ends up making the website look tacky, idk if a less bright shade would look better, or another solution would work better, like making the icons bigger, but I definitely agree that readability is an area that can be improved on this website

[RageGamerBoi]

Shade can always be changed, this is just a concept. As for bigger icons, I think that would work if there weren't so many rows. Expanding that much information down even more wouldn't be a good thing.

[arthuredelstein]

Hi @RageGamerBoi -- thank you very much for the suggestions. I think you're making a very important point that I should think about how to improve readability. As @IronMaltese points out, I also think aesthetics are important, though I'm very aware of the limitations of my own design abilities.

[inson1]

Yes, please!

[inson1]

But the yellow color doesnt fit imho. Gray/White would be better

[Thorin-Oakenpants]

and account for color-blindness :)

[y1111]

seem great and simple to do . in the page the dev can add a tick box in the header > in the where the legends for tick , x , - , is . jsut put box in the left or right with text "shadow" . so when one click to tick it the function activated should just add this code that OP already gave . done