CSS Tables

CSS

table {
  width: 100%;
  border-collapse: collapse; /* merges double borders into one */
}

th, td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: left;
}

th {
  background: #f3f4f6;
  font-weight: 700;
}

Striped rows and hover highlight

CSS

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

tr:hover {
  background: #eef2ff;
}

Without border-collapse: collapse, each cell keeps its own border with a small gap between cells (border-spacing), which is rarely what you want for a data table.

Striped rows and hover highlight

Keep learning