I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar above the table, no matter how wide it is. I want to achieve a seamless effect where the green bar spans the entire width of the table and remains directly above it as the user scrolls.
Below is the code snippet illustrating the current setup (the red outline indicates the boundaries of the containing html, body, and div elements): And here are the relevant CSS and HTML snippets:
CSS:
h2 {
font-family:Arial;
font-size:20pt;
color:#FFFFFF;
text-align:left;
font-weight:normal;
background-color:#00693C;
clear: both;
padding:2px;
margin: 0px;
}
table.response {
border:1px outset;
border-collapse: separate;
}
table.response td {
font-size: 14px;
padding: 3px;
border:1px inset;
}
HTML:
<h2>[snip]</h2>
<table class="response">
<tbody>
<tr>
<td>[snip]</td>
[...]
</tr>
[...]
</tbody>
</table>
Despite some attempts, including using a <thead> element with various configurations, I have not been able to achieve the desired result of having the green bar span at least the entire width of the table without resorting to JavaScript or dynamic styling in the HTML generation process.
If you have any insights on how to make this work without additional scripts or dynamically generated styles, I would greatly appreciate your guidance. Thank you!