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.
<tbody> should not contain <thead>. Also, is the 2nd <thead> supposed to be </thead>? 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.