W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: Proposal: Fixed Table Headers in CSS

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 15 Dec 2009 20:25:45 -0600
Message-ID: <dd0fbad0912151825t3badca1didc329cfff902eff2@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Doug Schepers <schepers@w3.org>, "Eric A. Meyer" <eric@meyerweb.com>, Mikko Rantalainen <mikko.rantalainen@peda.net>, www-style CSS <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:47:12 GMT