标题在固定的地方

Question

I have HTML like this:

<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>

And CSS (excerpt) like this:

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

The article-element resizes with the browser window. The table inside can be wider then the article-element, hence the overflow: auto. But: the header element has a 100% width, so if you scroll to right, the header becomes invisible.

If I give the header a position: absolute, I need to give it a fixed height too: doesn't work, as the height there is dependent on content (which varies).

So the thing is, I want it to render just as it does now, except that the header stays visible when I scroll to the right.

Answer 1

One solution would be to wrap your table in its own <div> , separate from the <header> , with its own set of scrollbars:

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

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

That way, the header appears to stay fixed, but the table is still scrollable left and right.

Answer 2

If I understand you correctly, the solution should be to put float:right in the header.

Another thing: you can't simply give a relative (%) value to a div's height. There is a way, but I believe that is when it inherits that property from its parent div.

Answer 3

If you want the header to stay in same place left and right and up/down, but don't want to hardcode in where it appears, you could try having a dive with relative positioning, place that where you want, and then place a fixed div in that. As long as you don't set it's top/left/bottom/right, the div should stay at the 0,0 of it's parent.