1

生成しているWebページがあり、テーブルにラベルを付ける緑色の背景を持つ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. 単一の<tr>と単一の<th>を含む<thead>要素。ここで、<th>のcolspanは、テーブルの列数に設定されます。これは列の数が少ない場合に機能しますが、テーブルが大きい場合（たとえば、colspan = "6000"の場合）、一部のブラウザー（具体的には、Firefox 11）は、セル（およびその背景）を1つの列のみを占めるものとしてレンダリングします。
  2. colspan="2"と<tr>要素に設定されたbackground-colorCSSプロパティを持つ単一の<tr>と1つの<th>を含む<thead>要素。Firefoxの要素の検査機能を使用すると、<tr>がテーブルの幅全体に広がっていることがわかりましたが、背景は1つのセルにのみ適用されていました。
  3. テーブルの残りの列ごとに、単一の<tr>と1つの<th>を含み、colspan="2"と別の<th>を持つ<thead>要素。<thead>のセル間の分離を削除しようとしましたが、できませんでした。

私の質問はこれです：緑色のバーを少なくともテーブルの幅全体に伸ばす効果を達成する方法はありますか？もしそうなら、それは何ですか？テーブルのHTMLを生成するときに、JavaScriptを使用しないか、スタイルコードを生成する必要があります。

4

2 に答える 2

2

Add float: left or display: inline-block to the element that contains the table and h2.

于 2012-06-07T17:45:42.217 に答える
1

追加

div#container { display: inline-block; }

CSS に、その名前の DIV 内に<h2>andを埋め込みます。<table>

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

これは、最新のブラウザで動作するはずです。

于 2012-06-07T17:51:57.333 に答える