Lesson 52 CCS pseudo selectors building Balance Sheet

HTML-CSS
1

Hi, I’m trying to understand how the “VW” unit works.
Using 100vw should make the element (data cells of the table in this case) fit the entire viewport. But instead of that, these cells are upsized without overflowing the “TH” of each row. So, the width won’t ever be 100vw. Why do we need to use it? Can’t we use only “width-min: 4rem”?

How are related the vw units to the other objects? I mean the container and the parent table or section?

I copy one of the “tests” I did by changing the bg color to view the cell’s sizes.

td {
  width: 1vw;
  background-color: red;
  border: 10px solid black;
}

Why this makes all the cells of different widths? See below (I point in green the different sizes):

image

2

I am also confused by the behaviour in your test case and hoping someone can help explain how this works.

One thing I noticed in the original code though, is if you remove the “width: 100vw;” from the tbody td selector, the tables all become different sizes.

different_sizes
different_sizes864×683 47.8 KB

Putting it back in to 100vw seems to lock in the 4rem size so that no matter how big or small you make your screen, the table stays at 100% of the 4rem size. I am not sure that’s correct, just how it looks to me.

Thanks for pointing this out! It’s really interesting to see how everything interacts together.

1 Like