Basic styling

• set the table field div (not the table element) to have width: 100%  and overflow-x: auto; to enable horizontal scrolling when the viewport is to narrow for the table.
• position the caption using caption-side
• Use padding on th and td elements as the use of cellpadding in HTML is discouraged.

Complex tables

Styling a complex table

a.k.a.: "Having borders only between rows that are not adjacent to a row with a cell that spans multiple rows."

Technique:

• use border-collapse for the whole table
• to make some borders disappear:
  • make some cells have a border color identical to the background color of the table
  • use z-index to make them sit on top of the border of another cell (thanks to border collapsing)
• use the scope="row" attribute to target the first cells of "partial" rows (i.e. cells sitting next to the spanning cells)

/*** Tables ***/
.field.table {
    width: 100%;
    overflow-x: auto;
}
table {
    border-collapse: collapse;
}
table caption {
    caption-side: bottom;
    border-top: 1px solid black;
    font-style: italic;
    font-size: smaller;
}
th, td {
    padding: 5px;
}
table thead th {
    background: #758aba;
    color: #fff;
}
tbody tr:not(:first-child) {
    border-top: 1px solid black;
}
tbody th[rowspan], td[rowspan] {
    background: white;
    z-index: 10;
}
th[rowspan]~td:not([rowspan]) {
    border-bottom: 1px solid white;
}
td[scope]:first-child, td[scope]:first-child~td {
    border-top: 1px solid white;
}