Tables with banded rows

[ First published October 21st, 2019 ]

Those of a certain age, or maybe just old-roleplayers, will fondly remember the masses of tables where the rows were banded into sets of three…. mine was from AD&D (3rd edition)

For those of you who managed to avoid such perils…. see the image below.

Turns out to be quite easy to do, too:

<table id="naas_libs_table">
<tbody><tr>
	<td> </td>
	<td>astro<br><small>(python: 3)</small></td>
	<td>geo<br><small>(python: 3)</small></td>
	<td>haskell<br><small>(python: 3)</small></td>
	<td>java<br><small>(python: 3)</small></td>
	<td>julia<br><small>(python: 3)</small></td>
	<td>matlab<br><small>(python: 2)</small></td>
	<td>python2<br><small>(python: 2)</small></td>
	<td>python2<br><small>(python: 3)</small></td>
	<td>rstudio<br><small>(python: 3)</small></td>
	<td>sage<br><small>(python: 2)</small></td>
	<td>sage<br><small>(python: 3)</small></td>
	<td>standard<br><small>(python: 3)</small></td>
</tr>
<tr>
	<td>_libgcc_mutex</td>
	<td></td>
	<td>0.1</td>
	<td>0.1</td>
....
</tr>
<tr>
	<td>_r-mutex</td>
	<td></td>
	<td></td>
.....
</tr>
<tr>
	<td>_tflow_select</td>
	<td></td>
.......
</tr>
<tr>
	<td>absl-py</td>
........
</tr>
<tr>
..........

then a CSS of:

table#naas_libs_table tr:nth-of-type(6n+2) {
    background-color: #ccc;
}

table#naas_libs_table tr:nth-of-type(6n+3) {
    background-color: #cccc;
}

table#naas_libs_table tr:nth-of-type(6n+4) {
    background-color: #ccc;
}

table#naas_libs_table tr:first-of-type {
    border: 1px solid black;
    font-weight: 800;
}

table#naas_libs_table {
    border-spacing: 0;
}

Sweet, eh? – it’s “every 6th row, starting x from the top”

(and no, I have no idea why the middle grey row appears lighter!)