Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 53

Tell us what’s happening:
I really don’t understand why I am doing this step. I understand that setting the minimum and maximum width to the same value means it will always be fixed (4rem in this case). But then why am I setting up the width to be 100vw? Isn’t it always going to be 4rem?

Also, what’s the difference if instead of setting the minimum and maximum width to the same property I just set the width to be 4rem?

Your code so far

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.41

Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 53

Link to the challenge:

Test it. Remove the width: 100vw from the ruleset and see what happens. Pay special attention to the Net Worth.

This is a good question and to be honest, I’m not sure there is any difference. My testing shows that if you got rid of the min and max width properties and just set width: 4rem that you achieve the same results. But don’t consider this conclusive yet. I haven’t fully tested it.

Thanks for pointing it out :slight_smile: I did that and noticed that when I removed width: 100vw the data cells in the Net Worth table seemed to be stretching. However, I still can’t comprehend what exactly, or more correctly, how this is happening?

What I understand from the code is it should widen each data cell in the body rows of each table to width of the viewport. Am I making some mistake in understanding some kind of basic concept here? I’m sorry for not getting it the first time.

Well, I’m not enough of a CSS expert to give you a definitive answer but it has something to do with the fact that the table has its width set to 100%. If you remove that then you don’t need the width on the tds to get them to respect the min/max width. But when the table is forced to stretch to 100% then apparently that is not enough and you need to add the width: 100vw in order to keep them at 4rem. But as I noted above, you can probably just set the width to 4rem in the first place and do away with min/max width completely. Unless there is some weird quirk in a browser that needs it.

1 Like

Got it! Most other sources including AIs explained something similar. Thank you so much for taking your time to help me :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.