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

HTML-CSS
1

I’m not having an issue solving the challenge, but I had a question in regards to the “vw” css unit. I attempted initially to solve this challenge by setting the width property to 100%, but that resulted in a drastic change to the layout of the table. After doing some research and trying to figure out where I went wrong, I caved and checked the hint and it said to set the width property to a value of 100vw, which worked perfectly. What I’m not understanding is the difference is between using a percentage vs using the vw unit? My understanding is that the vw unit represents a percentage relative to the width of the viewport…So how is that different from just using a percentage unit? Any help is appreciated :smiley:

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; rv:105.0) Gecko/20100101 Firefox/105.0

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

Link to the challenge:

2

%age works with the parent container (so if you’re the top level container, then yes, it will be a %age of the viewport, but not if you are a child of a smaller sized container).

ref: CSS Units

3

Ah. So you’re saying that when I set the width to 100% on an element that’s inside the table, it’s only going to be 100% the width of the table itself, or whatever container its nested in?

4

yes, that’s it :confetti_ball: :magic_wand: :balloon:

1 Like
5

I appreciate the help!

6

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