Step 53 build a balance sheet - what is the meaning of this step?

HTML-CSS
1

Step 53:
Create a selector to target your td elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of 4rem. This approach ensures that the width is fixed, whereas setting width specifically would allow the elements to shrink to the container.

I do not understand “setting width specifically would allow the elements to shrink to the container.”.And What is the meaning of writing like below? (Prevent for what?)

tbody td {
min-width: 4rem;
max-width: 4rem;
width: 100vw;
}

1718×1226 219 KB

Pre-thanks for your reply and correcting!!!

Course Source:Balance-Sheet Step-53

2

Maybe this is a beta bug?

Does it do anything visually?

Not really — because:
• min-width: 4rem and max-width: 4rem = each is forced to be exactly 4rem wide
• width: 100vw = this has no effect, because it’s overridden by the fixed min/max values

So the cells will appear exactly 4rem wide — not the full viewport width — regardless of 100vw.

Why might this be used?

It could be:
• Intentional: to fix each column to exactly 4rem width for a clean, aligned layout
• Didactic: maybe it’s part of an exercise where you’ll later remove min/max or test responsiveness

What would make more sense?

If they meant to make the entire table full width, it should be:

table {
  width: 100vw;
}

And if they wanted fixed-width cells, they should just use width: 4rem, or even better:

tbody td {
  width: 4rem;
}

(no need for min and max unless you’re planning to adjust things responsively)

1 Like
3

I think so. :thinking:

4

I am not sure in this step is visible, but there is a difference between using min-width and max-width and width