the scrolling table revisited!

[richard]

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]

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

 

[dorayme]

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.