Learn more about CSS pseudo selectors by building a balance sheet

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?

[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)

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

Hi, I posted the link!

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?

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

Thank you so much!!!

1 Like

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:

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