CSS for Tables

Tables still have a place--for tabular data. Duh. Such as the Companies table in FDB. But I had to remember the CSS around tables.

First, the basic structure:

table
  thead
    tr
      th
  tbody
    tr
      td

Table

border-collapse: { separate (default) | collapse }
border-spacing: { #both | #horiz #vert } - default is 1px
empty-cells: { show (default) | hide }
table-layout: { auto (default) | fixed } - fixed is like !important for widths

For a responsive table, put it inside a container (e.g., div) with overflow-x: auto;

Width, height, border can be applied to table, th and td--not tr, thead or tbody.

Cells

th and td tags. CSS doesn't seem to like naked th and td. Prefer table td or table th selectors.

text-align: { left | center | top }
vertical-align: { top | bottom | middle }
padding
(margin doesn't do anything; use border-spacing)
border-bottom: - for just horizontal lines between rows

Rows

For a mouse-over to select whole rows at a time:

tr:hover { background-color: yellow; }

For alternating row colors:

tr:nth-child(even): { background-color: #f2e0f2; }