table layout question

[james438]

I suspect this is more of a css type of question, so I am posting it here.

I have a table of audio files with various details listed in each of the columns. At the top there is a title for each column. What I would like to do is keep the title row fixed in place so that when the user scrolls down with the mouse the row for the titles stays fixed in place.

What do you suggest is the best way to go about this. I can think of three right now. One is to set up a table on top of another table. Second, use floats to create a similar effect and third, use some z indexing to position the table or image (I don't like the idea of using an image) to overlap the table.

I am curious what your thoughts are. Here is a link (http://www.sovgraceopc.org/resources2.php) to the page I am trying to revise.

Also, how do you upload and display an image in a post?

[jscheuer1]

Just move the first row outside the scrolling div into a div and table of its own. To get things to line up, adjust the css on the new div and on the new td's a little as shown, and you're good to go:


<div style='width:725px;background-color:#DFE9BF;line-height:19px;border:solid 1px #000;border-bottom-width:0;margin:auto;'>
<table style="font-family: 'sans-serif',Helvetica, Arial, sans-serif;">
<tr style='background-color:#EFF9CF;'>
<td style='width:90px;'><b>Date</b></td>
<td style='width:217px;'><b>Title</b></td>
<td style='width:213px;'><b>Verse</b></td>
<td style='width:205px;'><b>Preacher</b></td>
</tr>
</table>
</div>
<div style='height:375px;overflow:auto;scrollbar-base-color:tan;width:725px;background-color:#DFE9BF;line-height:19px;border:solid 1px #000;border-top-width:0;;margin:auto;'>
<table style="font-family: 'sans-serif',Helvetica, Arial, sans-serif;">
<tr class='a1hover'>
<td style='width:90px;'><a href="http://www.sovgraceopc.org/audio/120411.mp3">2011-12-4</a></td>
<td style='width:220px;'>A Tale of Two Annunciations</td>
<td style='width:220px;'>Luke 1:26-38</td>
<td style='width:195px;'>Ken Golden</td>
</tr><tr class='a1hover'>
<td><a href="http://www.sovgraceopc.org/audio/112711a.mp3">2011-11-27</a></td>
<td>The Lord Remembered</td>
<td>Luke 1:5-25</td>
<td>Ken Golden</td>
</tr><tr class='a1hover'>
<td><a href="http://www.sovgraceopc.org/a . . .

[james438]

Thank you, that was definitely what I was looking for. I noticed the other parts where you refined my css a little as well.

[james438]

I collapsed the borders in the tables and notice that in different browsers the columns don't always line up very well. Do you (or others) have any suggestions on how to get things to line up again?

[jscheuer1]

Using Firefox or Chrome as the standard, line them up in it. Then the only browsers you should need to tweak are IE 8 or possibly less and maybe Opera. IE 9 should follow Chrome/Firefox/Safari. IE 8 and/or less can have conditional stylesheets made. Opera would need a javascript assist if it needs it's own styles.

In my tests without collapsed borders, IE 9 and 8/Chrome/Firefox/Safari were close enough together not to worry about.

[james438]

Ah, much obliged. Thank you :).

I code a little less these days and sometimes the obvious answers are not as obvious as they once were.