Tables and data-heavy interfaces

Readable tables

Tables should clearly distinguish headings, rows and important values. Use border, padding, alignment and typography utilities rather than reducing everything to tiny text.

Responsive tables

Wide tables can overflow horizontally on small screens. A common solution is a wrapper with overflow-x-auto while allowing the table itself to retain a useful minimum width.

Do not hide data accidentally

If mobile needs a different representation, consider a purpose-built responsive component rather than forcing a dense desktop table into a tiny viewport.