CSS table styling should enhance readability of tabular data, not simulate non-tabular layouts.
Useful table styling rules
table { border-collapse: collapse; width: 100%; }\nth, td { border: 1px solid #d4d4d8; padding: .5rem; }\nth { text-align: left; background: #f8fafc; }
Production checklist
- Preserve clear row/column scanning contrast.
- Use horizontal scroll container for narrow screens.
- Do not remove all borders if it harms readability.
Important interview questions and answers
- Q: Why
border-collapse: collapseis common?
A: It prevents doubled border seams and creates cleaner grids. - Q: How to handle wide tables on mobile?
A: Wrap table in an overflow container instead of forcing tiny unreadable cells. - Q: CSS concern vs HTML concern in tables?
A: CSS handles appearance; HTML semantics (th,caption,scope) handle meaning/accessibility.
Pitfall: Check cascade order—author stylesheet loses to inline styles and !important surprises.