Why does 100% and 100vw make the table behave differently?

[GhostJello]

tbody td {
  border: 1px solid black;
  width: 100vw;
  min-width: 4rem;
  max-width: 4rem;
}

step 52: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-52

[RGBLogic]

Because vw is going off of the width of the viewport and not the parent elements width. When using 100% you are referencing the parent element’s available width.

[GhostJello]

Thank you. What bugged me was why the table for 100% was uneven. After thinking about your answer, I came up with this. min-width and max-width of less than 33% will evenly space a 3 column table.

tbody td {
border: 1px solid black;
width: 100vw;
min-width: calc(100% / 3);
max-width: calc(100% / 3);
}