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

HTML-CSS
1

Tell us what’s happening:

I have to start by saying I know the solution already, but my question is regarding a part of the solution that I do not understand.

I like to fiddle around with values to get a good feeling for new concepts that are introduced, but this one kind of has me stumped.

The solution to this step is:

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

But, if we instead put:

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

we visually get the same result.

If we, for instance, only change the selector from tbody td to only td but leave the width at 100vw instead of changing it to 100%, so:

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

the format of the balance sheet gets terribly messed up.

Alternatively, if we have the tbody td selector but leave the width at 100%, so:

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

again, the format gets terribly messed up.

I can’t seem to nail down the relationship between the selectors and the width here. To my understanding, the only td elements in the html already exist within a tbody, so I suppose it was already confusing for me that we specified a tbody td selector to begin with.
I apologize if this ends up becoming more complicated than I expect, but any help is greatly appreciated.

Thank you!

Your browser information:

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

Challenge Information:

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

2

Hey good question, but coding is no longer an exact science full of what can only be discibed as redundant. :smile:
note: you see this kind of thing a lot with CSS.

3

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