Table Refinements

Table Refinements

A few niche properties for perfect tables.

caption-side

Where the <caption> sits:

table {
  caption-side: top;    /* default */
  caption-side: bottom;
}

empty-cells

Show/hide empty cell backgrounds:

table {
  empty-cells: show;    /* default */
  empty-cells: hide;    /* no background on empty cells */
}

table-layout

How columns get their widths:

table {
  table-layout: auto;    /* sizes from content (default) */
  table-layout: fixed;   /* even columns, from first row */
}

fixed renders faster and is predictable.

border-spacing

Space between collapsed-less cells:

table {
  border-spacing: 8px 4px;   /* horizontal vertical */
}

Only works when border-collapse: separate.

TL;DR

• caption-side flips the title top/bottom.
• empty-cells hides empty-cell backgrounds.
• table-layout: fixed = predictable, faster columns.
• border-spacing needs border-collapse: separate.