styling tables

[punkish]

@gsautter if you want, you can use the following css snippet as a starting point to style your tables

<style>
table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    min-width: 800px;
    font: 1em sans-serif;
}
table tr { border-bottom: 1px solid }
caption { padding: 10px; }
thead {
    background-color: #333;
    color: white;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 2%;
}
table th, table td { padding: 10px 20px; }
tbody tr:nth-child(odd) { background-color: #fff; }
tbody tr:nth-child(even) { background-color: #eee; }

/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
    /* Hide the table headings */
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* Removes double-borders */
        width: 50%;
    }
}
</style>

<table>
    <caption>
        <b>TABLE 3.</b> Measurements of <i>Cnipsomorpha nigromaculata</i>
        <b>sp. nov.</b>
    </caption>
    <thead>
        <tr>
            <th>Lengths (mm)</th>
            <th>Female (HT)</th>
            <th>Male (PT)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Body</th>
            <td>39.0</td>
            <td>44.0</td>
        </tr>
        <tr>
            <th>Head</th>
            <td>3.0</td>
            <td>2.0</td>
        </tr>
        <tr>
            <th>Antennae</th>
            <td>6.0</td>
            <td>11.0</td>
        </tr>
        <tr>
            <th>Pronotum</th>
            <td>2.0</td>
            <td>2.0</td>
        </tr>
        <tr>
            <th>Mesonotum</th>
            <td>8.0</td>
            <td>10.0</td>
        </tr>
        <tr>
            <th>Metanotum</th>
            <td>4.5</td>
            <td>5.5</td>
        </tr>
        <tr>
            <th>Median segment</th>
            <td>1.0</td>
            <td>1.5</td>
        </tr>
        <tr>
            <th>Profemora</th>
            <td>16.0</td>
            <td>22.0</td>
        </tr>
        <tr>
            <th>Mesofemora</th>
            <td>9.0</td>
            <td>12.0</td>
        </tr>
        <tr>
            <th>Metafemora</th>
            <td>12.0</td>
            <td>17.0</td>
        </tr>
        <tr>
            <th>Protibiae</th>
            <td>17.0</td>
            <td>22.0</td>
        </tr>
        <tr>
            <th>Mesotibiae</th>
            <td>11.0</td>
            <td>12.0</td>
        </tr>
        <tr>
            <th>Metatibiae</th>
            <td>14.0</td>
            <td>17.0</td>
        </tr>
    </tbody>
</table>

cc @myrmoteras @seggenberger