This might seem like a straightforward question but I seem to have reached a bottleneck and can't quite figure out an alternative way.
When creating tables, it is possible to style the TH row and have a background colour (with title) that spans across the top of the table.
However, I am not sure how to achieve this with divs since the container div has padding on all sides.
Two methods I have thought of include:
Using relative positioning - move the title to the left, increase the width (to over 100%) and then set padding to a suitable size. Given the title size might change, this might not work for different screen widths.
Defining a CSS "gradient" as the background and set it to e.g. 8% from the top of one colour and white for the remaining. This is ideal as its just a CSS change but given a title can be long or short (and also accounting for different screen widths like method 1) one would have to customise it for each 'page' and screen-width.
Would be really grateful for some expert input on this as it seems like it should be straightforward but I can't think another method so far that doesn't require page-specific adjustments aplenty.
EDIT: Thanks for the prompt re: code - was in a rush to post this so didn't do a proper fiddle. Apologies.
To clarify: I do not have Tables since it is part of the main content i.e. I would like a result similar to
<table> but actually use
There are three approaches shown in the fiddle. The first is the 'table' version, and the other two are my current "solutions" which are a bit fiddly. Thanks to everyone for your input :)