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