Scrollable Table with Fixed Headers

rf · Jun 9, 2010

Mel Smith said:
rf said:

div#headerrow {
position: absolute;
top: 195px;
width: 820px;
height: 50px;
left: 49%; /* I require this but don't know why ?? */
padding: 2px;
margin: 0 0 0 -415px;
overflow: auto;
}

Why are you using absolute?

Why are you positioning it half way across the viewport and then supplying a
hugely negative margin to put it back somewhere on the left. Is this some
attempt to "centre" the object?

And, if I envisage this correctly, at a viewport size of anything less than
830 pixels the left hand side of this will disappear out of the left side of
the viewport, never to be scrolled to again.

Please provide a URL of your page. I need to see this in action.

Mel Smith · Jun 9, 2010

rf said:
Why are you using absolute?

This is 'absolute' with reference to the 'relative' container <div>
(advice from my 'Beginning CSS for Web Design 2nd edition by Richard York
published in 2007)

Why are you positioning it half way across the viewport and then supplying
a hugely negative margin to put it back somewhere on the left. Is this
some attempt to "centre" the object?

Yes (humbly) ...

And, if I envisage this correctly, at a viewport size of anything less
than 830 pixels the left hand side of this will disappear out of the left
side of the viewport, never to be scrolled to again.

Yup -- it disappears. But you can scroll all you want on the right side
but you can't see the left side for ever and ever ...

Please provide a URL of your page. I need to see this in action.

Let me screw up my newbie courage over the next few days.

-Mel

Mel Smith · Jun 9, 2010

Hi rf (and Adrienne):

Let me screw up my newbie courage over the next few days.

btw, here is a bit more iof the buckets of css that are involved:

table#fixedheader {
width: 790px;
table-layout: fixed;
}

/* I forgot to duplicate the above css for the t1 table and will try it
tomorrow, and determine if there's any difference */

While I get ready provide the url, here's the relevant portion in the <body>
of the page:

*******************************************

<div id="headerrow">
<table id="fixedheader">
<thead>
<tr>
<th align="center" width="8%" ><u>Org ID</u></th>
<th align="center" width="40%"><u>Org Name</u></th> 
<th align="center" width="25%"><u>Municipality</u></th>
<th align="center" width="5%" ><u>Rgn</u></th>
<th align="center" width="22%"><u>Notable Postings</u></th>
</tr>
</thead>
</table>
</div>
<div id="tableselect">
<table id="t1">
<tfoot>
<tr>
<td align="center" width="8%" ><u>Org ID</u></td>
<td align="center" width="40%"><u>Org Name</u></td>
<td align="center" width="25%"><u>Municipality</u></td>
<td align="center" width="5%" ><u>Rgn</u></td>
<th align="center" width="22%"><u>Notable Postings</u></th>
</tr>
</tfoot>
<tbody>

#forgoptions#
</tbody>
</table>
</div>
**************************************************************

Also, I'm working hard on cleaning up the database now. It currently
has 21000+ rows, and I have to cut this back a bit.

It would be unusual (but possible) for my users to request the 20,000
rows by selection from ALL Regions. I would expect the loading time on their
machines to be as slow as my tests have shown --- e.g., about 2 1/2 minutes
for loading. So, Region requests should normally be less than 2000 rows..

-Mel Smith

dorayme · Jun 9, 2010

"Mel Smith said:
While I get ready provide the url, here's the relevant portion in the <body>
of the page:

You tease you...

Mel Smith · Jun 9, 2010

dorayme said:
You tease you...

Dorayme & rf:

Going golfing and drinking today.

Back tomorrow for more investigation and cleanup of my database.

-Mel

rf · Jun 9, 2010

Mel Smith said:
Dorayme & rf:

Going golfing and drinking today.

I fail to see the relevance of golf.

One starts at a golf clubhouse proshop and then one proceeds to walk for
bloody kilometres up and down the countryside with a bunch of very expensive
and heavy sticks, hitting little white balls into creeks, dams, purposely
build little oval shaped beaches and the surrounding scrub and neighbouring
properties, meanwhile being bitten by sundry ants, bees, wasps mosquitos and
the occasional lizard lurking in the creek.

Why not simply start at the golf clubhouse proshop and proceed directly to
the bar for a quiet one and a plate or wedgies.? Drinking I can understand.

Robert Thomason · Jun 9, 2010

I fail to see the relevance of golf.

One starts at a golf clubhouse proshop and then one proceeds to walk for
bloody kilometres up and down the countryside with a bunch of very expensive
and heavy sticks, hitting little white balls into creeks, dams, purposely
build little oval shaped beaches and the surrounding scrub and neighbouring
properties, meanwhile being bitten by sundry ants, bees, wasps mosquitos and
the occasional lizard lurking in the creek.

Why not simply start at the golf clubhouse proshop and proceed directly to
the bar for a quiet one and a plate or wedgies.? Drinking I can understand.

Amen to that! My boss has spent over $500 in the past two weeks on just
*two* new golf clubs. That's too expensive a hobby for me.

dorayme · Jun 9, 2010

"rf said:
I fail to see the relevance of golf.

One starts at a golf clubhouse proshop and then one proceeds to walk for
bloody kilometres up and down

Except that these days most seem to use those electric buggies to
get about - rather spoiling the useful exercise component of the
sport. Still, there are the usual satisfactions of games, and now
and then quite unexpected pain and pleasure:

<http://dorayme.netweaver.com.au/jokes/golfingAgony.html>

TABLE with sticky header row and scrollable body rows	8	Oct 31, 2013
scrollable table with horizontal scroll?	1	Aug 8, 2008
Scrollable table widget with fixed header	2	Jul 5, 2004
Table with two rows of titles	4	Jul 4, 2013
Scrollable DataGrid	1	May 4, 2004
Creating a scrolling table with fixed header	10	Jan 13, 2005
Help with my responsive home page	2	Dec 14, 2022
Scrollable Grid With Fixed Header (Please Help Its Urgent)	1	Aug 16, 2006

Scrollable Table with Fixed Headers

rf

Mel Smith

Mel Smith

dorayme

Mel Smith

rf

Robert Thomason

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads