1

我有一个正在生成的网页，其中有一个带有绿色背景的 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. <thead> 元素包含单个 <tr> 和单个 <th>，其中 <th> 上的 colspan 设置为表中的列数。这适用于较少的列数，但对于较大的表（例如，colspan="6000"），某些浏览器（特别是 Firefox 11）将单元格（及其背景）呈现为仅占用一列。
  2. <thead> 元素包含一个 <tr> 和一个 <th>，其中 colspan="2" 以及为 <tr> 元素设置的 background-color CSS 属性。使用 Firefox 的 Inspect Element 功能，它显示 <tr> 跨越了表格的整个宽度，但背景仅应用于一个单元格。
  3. <thead> 元素包含一个 <tr> 和一个 <th>，其中 colspan="2" 和另一个 <th>，用于表的每个剩余列。我试图消除 <thead> 上单元格之间的分隔，但我无法做到。

我的问题是：有没有办法实现让绿色条至少延伸整个表格宽度的效果，如果是这样，它是什么？当我为表格生成 HTML 时，我宁愿不使用 JavaScript 或生成样式代码。

4

2 回答 2

2

将float: leftor添加display: inline-block到包含tableand的元素h2。

于 2012-06-07T17:45:42.217 回答
1

添加

div#container { display: inline-block; }

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

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

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

于 2012-06-07T17:51:57.333 回答