Styling Tables

Styling Tables

Make tables readable and pretty.

Borders and collapse

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;   /* merged single borders */
}

border-collapse makes double borders one clean line.

Width and centering content

table {
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
  vertical-align: middle;
}

Zebra stripes

Color alternate rows:

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

Hover highlight

tr:hover {
  background-color: #ddd;
}

Styled header + full card look

th {
  background-color: #04aa6d;
  color: white;
}

Responsive tables

Wrap the table in a div and allow horizontal scrolling on small screens:

.table-wrap {
  overflow-x: auto;
}

TL;DR

• border-collapse: collapse merges borders.
• Center text with text-align, add padding.
• tr:nth-child(even) zebra-stripes.
• tr:hover highlights.
• Wrap tables for mobile overflow.