Table reset
Collapse double borders, fix column width calculation, and add consistent cell padding — the baseline every data table needs before custom styling.
| Property | Value | Status |
|---|---|---|
| border-collapse | collapse | Required |
| table-layout | fixed | Recommended |
| width | 100% | Required |
| overflow-x | auto (wrapper) | Mobile |
Quick implementation
/* Responsive table wrapper — horizontal scroll on mobile */
.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Table reset */
table {
width: 100%;
border-collapse: collapse; /* merge adjacent cell borders into one */
table-layout: fixed; /* equal columns, faster layout calculation */
font-size: 0.875rem;
}
/* Header cells */
th {
text-align: left; /* browsers default to center — override */
padding: 0.5rem 0.75rem;
font-weight: 600;
border-bottom: 2px solid currentColor;
white-space: nowrap;
}
/* Data cells */
td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid oklch(0.22 0.02 260);
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* clip long text with ellipsis */
}
/* Remove bottom border from last row */
tr:last-child td {
border-bottom: none;
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer writing a data table stylesheet.
Goal: Create a normalized table reset and a clean data table style
suitable for displaying rows of structured data.
Include:
- border-collapse: collapse on the table element
- table-layout: fixed for predictable column widths and faster
layout (explain the difference from auto layout)
- text-align: left on th (browsers default to center)
- A responsive wrapper div with overflow-x: auto for mobile
- Long cell content: overflow hidden + text-overflow ellipsis
- Row hover state using :hover on tr
- Sticky header option: position sticky on thead th with top: 0
and a solid background to prevent bleed-through
Accessibility:
- scope="col" on th elements
- aria-sort on sortable column headers
- caption element for table description
Return only the CSS and example HTML with inline comments.table-layout: fixed vs auto
The default table-layout: auto makes the browser read all cell content before calculating column widths — wider content gets wider columns. This produces readable tables but is slow on large datasets and makes column widths unpredictable. table-layout: fixed calculates column widths from the first row only (or from explicit width on <col> elements), which is dramatically faster and gives you pixel-precise control. The trade-off: you need to handle text overflow explicitly with overflow: hidden; text-overflow: ellipsis.
border-collapse and the spacing property
By default, HTML tables use border-spacing: 2px — adjacent cell borders are two separate lines with a gap between them. border-collapse: collapse merges adjacent borders into one, which is almost always what you want for data tables. If you want cell spacing (like cards in a grid), use CSS Grid instead of a table — the HTML table element is for tabular data, not layout.