• Ian Stuart's picture

    Tables with banded rows

    Ian Stuart / October 21, 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!)

    Picture: