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

Question

我有一个我正在生成的网页，其中有一个标有表格的绿色背景的h2。该表可以有任意数量的列，我希望h2元素水平延伸到用户可以滚动的位置，这样表格上方总会有一个绿色条。我试图实现的效果是一个绿色条，至少跨越表的宽度，因此无论用户滚动多远，它都始终直接位于表的上方。

以下是目前的样子（红色轮廓大致显示包含html，body和div元素的边缘）： 以下是相关的代码片段：

的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. A＆lt; thead＆gt;包含单个＆lt; tr＆gt;的元素并且单个＆lt; th＆gt;其中colspan在第一个上面。设置为表中的列数。这适用于较少数量的列，但对于较大的表（例如，使用colspan =“6000”），某些浏览器（特别是Firefox 11）将单元格（及其背景）渲染为仅占用一列。
2. A＆lt; thead＆gt;包含单个＆lt; tr＆gt;的元素和一个＆lt; th＆gt;使用colspan =“2”并为＆lt; tr＆gt;设置背景颜色CSS属性元件。使用Firefox的Inspect Element功能，它显示了＆lt; tr＆gt;跨越了表格的整个宽度，但背景仅应用于一个单元格。
3. A＆lt; thead＆gt;包含单个＆lt; tr＆gt;的元素和一个＆lt; th＆gt; colspan =“2”，另一个＆lt; th＆gt;对于表格的每个剩余列。我试图删除＆lt; thead＆gt;上的单元格之间的分隔，但我无法进行。

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

Answer 1

将float: left或display: inline-block添加到包含table和h2的元素。

Answer 2

添加

div#container { display: inline-block; }

在CSS中，将<h2>和<table>嵌入到具有该名称的DIV中：

<div id='container'>
  <h2>...</h2>
  <table>
    ...
  </table>
</div>

这应该适用于任何现代浏览器。