Questions & Answers

Creating margin between <thead> and <tbody> and add background to the thead

I would like to use a table layout as shown on the screen using thead that has a margin from tbody and a background that spans the entire width of the page (so it extends beyond the table). Is it possible to do this using tables? This is part of a larger system and I would not like to use flex.

Expected effect

2023-01-21 00:10:05
Please include your current HTML and CSS (as text) in which you tried this.
2023-01-21 00:10:05
<tbody> should not contain <thead>. Also, is the 2nd <thead> supposed to be </thead>?
Answers(1) :

Yes, it is possible to use tables to achieve this layout. You can use the thead element to define the header section of the table, and then use CSS to give it a margin from the tbody element and a background that spans the entire width of the page. To extend the background beyond the table, you can set the table element to have a fixed width and use a negative margin on the left and right sides. Additionally, you can use the width and background-color properties to control the width and color of the header background.