Re: Proposal: Fixed Table Headers in CSS

Doug Schepers wrote:
> My conception of this is that the headers would stop scrolling when they
> hit the very last row... so, the last thing the user would see while
> scrolling down is a 2-row table... the header row and the final row.
> 
> I guess ideally this is what would happen when the user scrolled up
> toward the table from the bottom as well... for example, if the user
> jumped to the bottom of the page via a fragment identifier, then
> scrolled up, they would see that 2-row table, with the table growing and
> the header sticking to the top of the window until the whole table is
> passed.

This sounds great. I would like to make that more generic, though.

Perhaps a new position value (e.g. "fixed-relative") that is a mix of
"relative" and "fixed": the content still reserves space in the flow
similar to relative but it would be displayed as fixed if the element
would not fit in the viewport but its containing block is visible. In
that case, the element would be "moved" within its containing block
until it would fully fit in the viewport. As a corner case, if the
containing block is partially visible (e.g. part of its bottom is
visible at the top of the viewport), the "fixed-relative" element could
be only partially visible as well. Another corner case would be if the
"fixed-relative" is higher or wider than the viewport - in that case the
element should be positioned attached to two sides of the viewport that
are closest to element's "relative" position.

I think that it should look like "fixed" in the sense, that the
element would stay fixed relative to viewport while the normal content
is scrolled (no hopping around or flickering). I think that it should
not stick to rows (or any other elements) but always stay exactly at the
edge of the viewport (if moved from it's "true relative" position).

The same feature could be used to bring footer from bottom of a table to
bottom of the viewport, too. And it would work it RTL content, too.

I could see the property used for <h2> inside a <section> as such:

section { position: relative; }
h2 { position: fixed-relative; background: white; }

with document

<section>
<h2>header for this section</h2>
<p>some text content that flows multiple viewports</p>

If I then scroll down the document, the header would stay at the top of
the viewport until the end of the section.

I'm not sure how the padding or margin should affect the position of the
element relative to viewport edge. My first instinct is to honor the
padding and ignore the margin when computing the position of the element
relative to viewport edge.

I'm open for suggestions for the position name, the
"relative-or-fixed-within-viewport-and-container" would be pretty close
to the behavior but that's way too long. Another choice could be
"relative-float-to-viewport" or just "float-to-viewport".

-- 
Mikko