Why does it when I set the width size of a table cell to 100% they don't render evenly?

This is the CSS code:
tbody td {
border: 2px solid;
width: 100%;
max-width: 4rem;
min-width: 4rem;
}
I know that I can use {width: 100vw;} and this problem would be solved, but I’m trying to understand why is it that each cell is a different size.
I’m not looking for a substitute solution, I’m just trying to understand the reason behind this behavior…

Hi there @itsxxtx . The issue arises because table cells (<td>) follow table-specific width distribution rules rather than behaving like block elements. When you set width: 100%, it doesn’t make the cell span the entire table but instead fills the column based on content and table constraints. The presence of max-width: 4rem limits each cell’s width, but since table columns adjust dynamically to fit content, different cells can end up with different sizes. The default table-layout: auto further influences this behavior by measuring content first before distributing space. Using table-layout: fixed would enforce equal column widths, while width: 100vw; forces the cells to match the viewport width, bypassing normal table calculations.

1 Like