Learn more about CSS pseudo selectors by building a balance sheet

HTML-CSS
1

I first tried making the balance sheet on my own and in my sheet the coloured table header and the double borders have the same width. How did they set a different width
for table header and table body in the lesson? I am going through the lesson and can’t figure out how the header of the table is occupying the whole width of the sheet yet the double borders in the table aren’t?

Screenshot 2022-12-14 at 3.40.01 PM
Screenshot 2022-12-14 at 3.40.01 PM592×616 52.8 KB

[Link for the last step of the lesson](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-65)

2

Pls post a link to the last step of the project so we can look at the code too.

3

Hi, I posted the link!

4

Based on the challenge, that is the required output for the thick one to cover the entire width but for the double thin lines not to cover the entire width.
or is it that you are intend for the double lines to also cover the entire width?

5

thanks.

Here’s the code that you would have to modify if you want the table to be as wide as the black table header with the years in it.

.table-wrap {
  padding: 0 0.75rem 1.5rem 0.75rem;
}

for eg. if you remove this padding entirely, you can see the effect is the whole table gets wider.
(you can target the left and right padding specifically to see that)

The table is itself part of the .table-wrap which is the reason its width is being limited here.

1 Like
6

Thank you so much!!!

1 Like
7

No, I want to do it exactly as it’s done in the lesson… but now I realise (thanks to the other commenter) that the header is outside the table element so it can easily be done :sweat_smile: