1

次のような HTML があります。

<article>
    <header>
        <hgroup>
            <h1>Wk 25 </h1>
            <h2>(18-06 tot 24-06)</h2>          
        </hgroup>
        <p>Some info</p>
    </header>
    <table>
        <thead>
            <tr>
                <th class="legenda">Title</th>
                <th class="legenda">Title</th>
                <th class="legenda">Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>
</article>

そしてCSS（抜粋）は次のようになります：

article {
    padding: 0;
    margin-bottom: 15px;
    overflow: auto;
}
article header {
    background: url('header.png') repeat-x bottom center;
    padding: 4px 10px;
    cursor: pointer;
}

article-要素はブラウザ ウィンドウに合わせてサイズ変更されます。内部のテーブルは article-element よりも広くなる可能性があるため、overflow: auto. ただし、ヘッダー要素の幅は 100% であるため、右にスクロールするとヘッダーが見えなくなります。

ヘッダーに位置を指定する場合: 絶対、固定の高さも指定する必要があります。高さはコンテンツに依存するため (変化します)、機能しません。

つまり、右にスクロールしてもヘッダーが表示されたままになることを除いて、今と同じようにレンダリングしたいということです。

4

3 に答える 3

3

1 つの解決策は、独自のスクロールバー セットを使用し<div>て、 とは別に独自の でテーブルをラップすることです。<header>

<article>
  <header><!-- ... --></header>

  <div style="overflow:auto">
    <table><!-- ... --></table>
  </div>
</article>

こうすると、ヘッダーは固定されているように見えますが、表は左右にスクロールできます。

于 2012-06-18T13:14:12.327 に答える
0

ヘッダーを左右および上下に同じ場所に配置したいが、表示される場所にハードコーディングしたくない場合は、相対的な位置でダイビングを行い、必要な場所に配置してから、その中のdivを修正しました。上/左/下/右に設定しない限り、divは親の0,0に留まる必要があります。

于 2012-06-18T13:18:28.550 に答える
0

私があなたを正しく理解していれば、解決策はfloat:rightヘッダーに入れることです。

もう 1 つ: div の高さに相対 (%) 値を単純に与えることはできません。方法はありますが、親divからそのプロパティを継承するときだと思います。

于 2012-06-18T13:08:43.970 に答える