Why Does Table Row Height Matter?
Row height in a table component isn't just a spacing value — it's the key number that balances readability against information density. Too tight and text feels cramped; too loose and you fit less on screen.
The basic formula is line-height × line count + padding × 2. Line-height is typically 1.4-1.6x the font size, and adding the cell's vertical padding gives you the actual rendered row height.
Choosing a Density Level
Admin dashboards and spreadsheet-style UIs that need to show large volumes of data at once work best with a compact density under 40px. General lists and dashboards do fine at a standard 40-56px, while mobile UIs where users tap rows to select them need a comfortable density above 56px to meet the 44px minimum touch target.
Adjusting for Lines and Padding
If a cell contains a subtitle or badge that pushes content to two or more lines, increasing the line count immediately shows the height needed to avoid clipping. Padding controls visual breathing room, so tune it to match the overall tone of your table.
Frequently Asked Questions
Set line-height to 1.4-1.6x the font size and add top/bottom padding. A 14px font lands around 36px total.
Use a compact density under 40px for tables showing many rows at once, or 56px+ for tables users need to read carefully.
Tappable rows need at least 44px. Read-only tables can stay closer to desktop heights.