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

【问题标题】：HTML/CSS - Extend element width to visible area (beyond width of containing element)HTML/CSS - 将元素宽度扩展到可见区域（超出包含元素的宽度）
【发布时间】：2012-06-07 17:40:30
【问题描述】：

我有一个正在生成的网页，其中有一个带有绿色背景的 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>

我已经尝试过但没有奏效的方法：

元素包含单个和单个，其中上的 colspan 设置为表中的列数。这适用于较少数量的列，但对于较大的表格（例如，使用 colspan="6000"），某些浏览器（特别是 Firefox 11）会将单元格（及其背景）呈现为仅占用一列。
一个元素，包含一个和一个，其中 colspan="2" 以及为元素设置的 background-color CSS 属性。使用 Firefox 的 Inspect Element 功能，它显示跨越了表格的整个宽度，但背景仅应用于一个单元格。
一个元素，包含一个和一个，其中 colspan="2" 和另一个，用于表的每个剩余列。我试图消除上单元格之间的分隔，但我无法做到。
我的问题是：有没有办法实现让绿色条至少延伸整个表格宽度的效果，如果有，它是什么？当我为表格生成 HTML 时，我宁愿不使用 JavaScript 或生成样式代码。

【问题讨论】：

标签： html css layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

添加

div#container { display: inline-block; }

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

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

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

【讨论】：