CSS Tables

1) Borders & border-collapse

table {
  border-collapse: collapse; /* cells share borders */
}
th, td {
  border: 1px solid #e0e0e0;
  padding: 8px 10px;
}

2) Zebra Striping & Row Hover

tbody tr:nth-child(odd) { background: #fafafa; }
tbody tr:hover { background: #E3F2FD; }

3) Sticky Header (Scrollable Table)

.wrap { max-height: 220px; overflow: auto; }
thead th { position: sticky; top: 0; background: #e3f2fd; }

4) Fixed Table Layout + Truncation

table { table-layout: fixed; }
td.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

5) Responsive Patterns

a) Scroll Container (simplest)

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

b) Stacked Cards (small screens)

/* Hide header, label cells with data-label, and stack rows on narrow viewports */
@media (max-width: 576px) {
  .stack-table thead { display: none; }
  .stack-table tr    { display: block; margin: 8px 0; }
  .stack-table td    { display: flex; justify-content: space-between; }
  .stack-table td::before { content: attr(data-label); font-weight: 600; }
}

6) Minimal “Clean” Theme

.clean {
  border-collapse: separate;
  border-spacing: 0;
}
.clean th, .clean td { border: 0; padding: 10px 12px; }
.clean thead th {
  border-bottom: 2px solid #e0e0e0;
  background: #fafafa;
}
.clean tbody tr + tr td { border-top: 1px solid #eee; }