HTML/CSS - 将元素宽度扩展到可见区域（超出包含元素的宽度）

我正在生成一个网页，其中有一个带有绿色背景的 h2，标记了一个表格。该表格可以有任意数量的列，我希望 h2 元素水平延伸至用户可以滚动的范围，以便表格上方始终有一个绿色条。我想要实现的效果是一个绿色条，至少跨越表格的宽度，因此无论用户滚动多远，它始终位于表格的正上方。

Here is what it currently looks like (the red outline shows approximately the edges of the containing html, body, and div elements): And here are the relevant pieces of code:

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>

我已经尝试过但没有成功的事情：

1. 包含单个 和单个 的 元素，其中 上的 colspan 设置为表中的列数。这适用于较少数量的列，但对于较大的表格（例如，使用 colspan="6000"），某些浏览器（特别是 Firefox 11）将单元格（及其背景）呈现为仅占用一列。
2. 一个 元素，包含一个 和一个带有 colspan="2" 的 以及为 元素设置的背景颜色 CSS 属性。使用 Firefox 的 Inspect Element 功能，显示 跨越了表格的整个宽度，但背景仅应用于一个单元格。
3. 一个 元素，其中包含一个 和一个带有 colspan="2" 的 ，以及表中每个剩余列的另一个 。我试图消除 上单元格之间的分隔，但我做不到。

我的问题是：有没有办法实现让绿条至少延伸到桌子整个宽度的效果，如果有的话，它是什么？我不想使用 JavaScript，或者在为表生成 HTML 时必须生成样式代码。

Add float: left or display: inline-block到包含table and h2.