the scrolling table revisited!

Discussion in 'HTML' started by richard, May 19, 2012.

  1. richard

    richard Guest

    http://1littleworld.net/sample/scrolltable.html

    KISS!
    Keep it simple stoopid!
    Over the years I've run across a miriad of scrolling tables.
    Most of them had javascript employed.
    As you can see, no script required.
    Just plain old CSS does the trick nicely.
    The trick is making sure your data cells match.
    The way I did it was to create the header row, then copy and paste that to
    the scrolling section.
    There are two divisions. The second one is wider than the head to allow for
    the scrollbar.

    Yes I used inches. So sue me.
    richard, May 19, 2012
    #1
    1. Advertising

  2. richard

    richard Guest

    On Sat, 19 May 2012 00:34:02 -0400, richard wrote:

    > http://1littleworld.net/sample/scrolltable.html
    >
    > KISS!
    > Keep it simple stoopid!
    > Over the years I've run across a miriad of scrolling tables.
    > Most of them had javascript employed.
    > As you can see, no script required.
    > Just plain old CSS does the trick nicely.
    > The trick is making sure your data cells match.
    > The way I did it was to create the header row, then copy and paste that to
    > the scrolling section.
    > There are two divisions. The second one is wider than the head to allow for
    > the scrollbar.
    >
    > Yes I used inches. So sue me.


    And in this version I use actual tables.
    The columns are slightly offset but no real problem.

    http://1littleworld.net/sample/scrolltable2.html
    richard, May 19, 2012
    #2
    1. Advertising

  3. richard

    dorayme Guest

    In article <1ku5buppn85pe$>,
    richard <> wrote:

    > http://1littleworld.net/sample/scrolltable.html
    >
    > KISS!
    > Keep it simple stoopid!
    > Over the years I've run across a miriad of scrolling tables.
    > Most of them had javascript employed.
    > As you can see, no script required.
    > Just plain old CSS does the trick nicely.
    > The trick is making sure your data cells match.
    > The way I did it was to create the header row, then copy and paste that to
    > the scrolling section.
    > There are two divisions. The second one is wider than the head to allow for
    > the scrollbar.
    >
    > Yes I used inches.


    Yes, and see what happens on text enlargement. I prefer your miles.

    Generally, not a good idea, the whole thing. An HTML table is the way
    to go for most of it, not a whole mob of ULs and LIs, these latter
    have no internal logic in their relations to each other.

    Maybe play with an idea something like:

    body {margin: 0;}
    table {border-collapse: collapse; }
    td {border: 1px solid; padding: .5em;}
    ..header {position: fixed; top: 0; left: 0; color: #900; background:
    white; }
    th {border: 1px solid; padding: .5em; font-weight: normal;}

    <table>
    <tr class="header">
    <th>Disc</th>
    <th>Cover</th>
    <th>Artist/Title</th>
    <th>Label</th>
    <th>Date</th>
    <th>Notes</th>
    </tr>
    <tr>
    <td>Disc</td>
    <td>Cover</td>
    <td>Artist/Title</td>
    <td>Label</td>
    <td>Date</td>
    <td>Notes</td>
    </tr>
    <tr>
    <td>Disc</td>
    <td>Cover</td>
    <td>Artist/Title</td>
    <td>Label</td>
    <td>Date</td>
    <td>Notes</td>
    </tr>

    etc.

    --
    dorayme
    dorayme, May 19, 2012
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Shawn B.

    Scrolling Table

    Shawn B., May 14, 2004, in forum: ASP .Net
    Replies:
    7
    Views:
    480
    Shawn B.
    May 16, 2004
  2. Peter Rilling
    Replies:
    1
    Views:
    511
    Lucas Tam
    May 11, 2005
  3. Geoff Smith
    Replies:
    22
    Views:
    1,275
  4. Geoff Smith
    Replies:
    0
    Views:
    773
    Geoff Smith
    Sep 9, 2003
  5. Richard
    Replies:
    6
    Views:
    521
    Toby A Inkster
    Jan 13, 2004
Loading...

Share This Page