Re: Proposal: Fixed Table Headers in CSS

On Tue, Dec 15, 2009 at 6:16 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> Mine too, but does so by pushing previous sticky elements in the same
> direction out of the way, which would also include the H1. Maybe there is
> some way around that which I haven't thought of, for when you want two
> levels of sticky elements inside each other.

Ah, I see what you're imagining now.  Interesting.  We'll have to give
this some thought to see which would end up more useful and more sane
to specify/implement.

>> How this
>> works, precisely, when you're mixing top-sticky and left-sticky
>> elements, frex, is up in the air.
>
> Yeah that's kind of tricky. I think usually if you had column-scoped THs on
> the left, and row-scoped THs in a THEAD along the top, you'd want to allow
> the horizontal and vertical to be able to overlap each other, with the side
> headers sliding under the THEAD when scrolling vertically. The stacking
> context of the first-in (THEAD) should be higher than later stickies, which
> is reverse of normal, but it looks better that way and seems neccesary. It's
> hard for me to imagine otherwise.

Indeed.  In the table headers case, you can actually sidestep this
with clever targetting.  Take the following markup:

<table>
  <thead>
    <tr>
      <td>
      <th>Foo 1
      <th>Foo 2
  <tbody>
    <tr>
      <th>Bar 1
      <td>Baz 1
      <td>Baz 2
    <tr>
      <th>Bar 2
      <td>Baz 3
      <td>Baz 4
</table>
<style>
thead th { position: sticky; top: 0; }
tbody th { position: sticky; left: 0; }
</style>

This will keep all the <th>s on screen without overlapping
information, because the dummy thead>td is okay to overlap.

This still doesn't solve the general problem, of course.  ;_;  I
provisionally agree that making previous things on top is probably the
best thing visually.

~TJ

Received on Wednesday, 16 December 2009 02:26:14 UTC