title: HTML/CSS - Extend element width to visible area (beyond width of containing element)
body: <p>I have a web page that I'm generating, where there is a h2 with a green background labeling a table. The table can have any number of columns and I would like the h2 element to extend horizontally as far as the user can scroll, so that there is always a green bar above the table. The effect I'm trying to achieve is a green bar that spans at least the width of the table, so that it is always directly above the table, no matter how far the user scrolls.</p>
  
  <p>Here is what it currently looks like (the red outline shows approximately the edges of the containing html, body, and div elements):
  <img src="https://i.stack.imgur.com/6dS9T.png" alt="Screenshot">
  And here are the relevant pieces of code:</p>
  
  <p>css:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;h2&gt;[snip]&lt;/h2&gt;
  &lt;table class="response"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;[snip]&lt;/td&gt;
        [...]
      &lt;/tr&gt;
      [...]
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Things I have tried already that haven't worked:</p>
  
  <ol>
  <li>A &lt;thead&gt; element containing a single &lt;tr&gt; and a single &lt;th&gt; where the colspan on the &lt;th&gt; is set to the number of columns in the table. This works for smaller numbers of columns, but for larger tables (for example, with colspan="6000"), some browsers (specifically, Firefox 11) render the cell (and its background) as only taking up one column.</li>
  <li>A &lt;thead&gt; element containing a single &lt;tr&gt; and one &lt;th&gt; with colspan="2" and the background-color CSS property set for the &lt;tr&gt; element. Using Firefox's Inspect Element feature, it showed that the &lt;tr&gt; spanned the entire width of the table, but the background was only applied to the one cell.</li>
  <li>A &lt;thead&gt; element containing a single &lt;tr&gt; and one &lt;th&gt; with colspan="2" and another &lt;th&gt; for every remaining column of the table. I tried to remove the separation between cells on the &lt;thead&gt;, but I was unable to.</li>
  </ol>
  
  <p>My question is this: Is there a way to achieve the effect of having the green bar extend at least the entire width of the table, and if so, what is it? I would prefer not to use JavaScript or have to generate style code when I generate the HTML for the table.</p>