Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I create a web page with non scrolling header?

Status
Not open for further replies.
alohaaaron

alohaaaron

Programmer
Mar 27, 2008
80
US

Hi, I have this web page below but instead of having column one scroll by itself, I would like all columns 1, 2 & 3 to scroll at once with a single vertical scrollbar with a fixed table header. How would I do this? Thanks, Aaron

<html>
<head>
<style type="text/css">
#scrollBody{text-align : left; width : 600px; height : 200px; overflow: auto;}
</style>
</head>
<body>
<table border="1">
<thead>
<tr width="600px">
<th>Column1</th><th>Column2</th><th>Column3</th>
</tr>
</thead>
<tbody>
<tr>

<td>
<div id="scrollBody">

Hmmm,<br>
I have a long table which doesn't fit on the screen without scrolling.<br>
Is it possible to fix the table-head and scroll the table-body?<br>
Thanks for every idea,<br>
<br>
=================<br>

repeat text for scroll<br>
=================<br>
Hmmm,<br>
I have a long table which doesn't fit on the screen without scrolling.<br>
Is it possible to fix the table-head and scroll the table-body?<br>
Thanks for every idea,<br>

</div>
</td>

<td>col2</td>
<td>col3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Column 1 Footer</th><th>Column 2 Footer</th><th>Column 3 Footer</th>
</tr>
</tfoot>
</table>
</body>

</html>
 
Sort by date Sort by votes
Are you really displaying tabular data? You should only use tables for tabular data.

Second you should really have a Doctype there. not sure if you just omitted it for the code you posted or in fact its not there but there should be one.

Anyway, You are already specifying that the div that contains your content table is scrollable. You you should be able to scroll it as is. With whatever content is inside.

However I would just have a non moveable header DIV that contains what you want and then a 100% width DIV under that that has the overflow property set to either auto or scroll.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks for your response. As it is I can only scroll the left side (column one), I want to be able to scroll the entire table at once. Just tabular data :) Do you have an example of how I should setup the DIV tabs?

Thanks,
Aaron
 
Upvote 0 Downvote
Missed the point of all columns.

Well if it really is Tabular data, then maybe something like this is what you want:




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Uh BillRay what thread?

BTW: I must mention, that the page I linked to, seems it doesn't work in IE7 or at least it didn't for me now that I checked.

IE7 seems to give the height of the tbody element to the TD, and doesn't really scroll the table.

I'll try to come up with something that works on all browsers I can test in and that validates later.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks. Is there a way to also make it so the fields are editable and a Submit button can be clicked to submit the data? Whenever I try to use input type=text fields I can no longer use arrow keys to navigate the grid. Only tab works horizontally and nothing works vertically except the mouse. They have a great example here without the submit button though. They don't use input type=text either so I am not sure if the data will still be submitted? I'd like the submit button so I can post to database.


Thanks!
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Scrolling Table</title>
<style type="text/css">
#cont2{
width:600px;
height:400px;
overflow:hidden;
border: 2px outset gray;
background:$9999FF;
}

table{
border:2px solid black;
width:100%;
padding:0px;
}

td{
border: 2px groove gray;
width:33%;
height:25px;
}

td.spacer{
width:14px;
}

thead.fixedheader{
width:100%;
background-color:#3366FF;
}

#scrollcont{
width:99%;
height:95%;
overflow:auto;
}

tbody.scrollcontent{
width:100%;
height:99%;
background-color:#7799FF;
}

th{
width:32%;
}

th.spacer{
width:10px;
}

table.headtable{
background-color:#3366FF;
}

td.htd{
height:2px;
border:0px;
}


a:link{
display:block;
height:100%;
color:#FFFFFF;
}
a:visited
{
color:#FFFFFF;
}

a:active:
{
color:#000000;
}
a:hover{
color:#AAAAAA;
}

input.mytextbox{
width:100%;
}
</style>
</head>
<body>
<div id="cont2">
<div id="header">
<table class="headtable"><thead class="fixedheader"><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th class="spacer">&nbsp</th></tr></thead><tbody><tr><td class="htd"></td><td class="htd"></td><td class="htd"></td></tr></tbody></table>
</div>
<div id="scrollcont">

<table>
<tbody class="scrollcontent">
<tr><td><input class='mytextbox' type='text' name='col1row0' value='Column 1 content 0'></td><td><input class='mytextbox' type='text' name='col2row0' value='Column 2 content 0'></td><td><input class='mytextbox' type='text' name='col3row0' value='Column 3 content 0'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row1' value='Column 1 content 1'></td><td><input class='mytextbox' type='text' name='col2row1' value='Column 2 content 1'></td><td><input class='mytextbox' type='text' name='col3row1' value='Column 3 content 1'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row2' value='Column 1 content 2'></td><td><input class='mytextbox' type='text' name='col2row2' value='Column 2 content 2'></td><td><input class='mytextbox' type='text' name='col3row2' value='Column 3 content 2'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row3' value='Column 1 content 3'></td><td><input class='mytextbox' type='text' name='col2row3' value='Column 2 content 3'></td><td><input class='mytextbox' type='text' name='col3row3' value='Column 3 content 3'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row4' value='Column 1 content 4'></td><td><input class='mytextbox' type='text' name='col2row4' value='Column 2 content 4'></td><td><input class='mytextbox' type='text' name='col3row4' value='Column 3 content 4'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row5' value='Column 1 content 5'></td><td><input class='mytextbox' type='text' name='col2row5' value='Column 2 content 5'></td><td><input class='mytextbox' type='text' name='col3row5' value='Column 3 content 5'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row6' value='Column 1 content 6'></td><td><input class='mytextbox' type='text' name='col2row6' value='Column 2 content 6'></td><td><input class='mytextbox' type='text' name='col3row6' value='Column 3 content 6'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row7' value='Column 1 content 7'></td><td><input class='mytextbox' type='text' name='col2row7' value='Column 2 content 7'></td><td><input class='mytextbox' type='text' name='col3row7' value='Column 3 content 7'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row8' value='Column 1 content 8'></td><td><input class='mytextbox' type='text' name='col2row8' value='Column 2 content 8'></td><td><input class='mytextbox' type='text' name='col3row8' value='Column 3 content 8'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row9' value='Column 1 content 9'></td><td><input class='mytextbox' type='text' name='col2row9' value='Column 2 content 9'></td><td><input class='mytextbox' type='text' name='col3row9' value='Column 3 content 9'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row10' value='Column 1 content 10'></td><td><input class='mytextbox' type='text' name='col2row10' value='Column 2 content 10'></td><td><input class='mytextbox' type='text' name='col3row10' value='Column 3 content 10'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row11' value='Column 1 content 11'></td><td><input class='mytextbox' type='text' name='col2row11' value='Column 2 content 11'></td><td><input class='mytextbox' type='text' name='col3row11' value='Column 3 content 11'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row12' value='Column 1 content 12'></td><td><input class='mytextbox' type='text' name='col2row12' value='Column 2 content 12'></td><td><input class='mytextbox' type='text' name='col3row12' value='Column 3 content 12'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row13' value='Column 1 content 13'></td><td><input class='mytextbox' type='text' name='col2row13' value='Column 2 content 13'></td><td><input class='mytextbox' type='text' name='col3row13' value='Column 3 content 13'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row14' value='Column 1 content 14'></td><td><input class='mytextbox' type='text' name='col2row14' value='Column 2 content 14'></td><td><input class='mytextbox' type='text' name='col3row14' value='Column 3 content 14'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row15' value='Column 1 content 15'></td><td><input class='mytextbox' type='text' name='col2row15' value='Column 2 content 15'></td><td><input class='mytextbox' type='text' name='col3row15' value='Column 3 content 15'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row16' value='Column 1 content 16'></td><td><input class='mytextbox' type='text' name='col2row16' value='Column 2 content 16'></td><td><input class='mytextbox' type='text' name='col3row16' value='Column 3 content 16'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row17' value='Column 1 content 17'></td><td><input class='mytextbox' type='text' name='col2row17' value='Column 2 content 17'></td><td><input class='mytextbox' type='text' name='col3row17' value='Column 3 content 17'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row18' value='Column 1 content 18'></td><td><input class='mytextbox' type='text' name='col2row18' value='Column 2 content 18'></td><td><input class='mytextbox' type='text' name='col3row18' value='Column 3 content 18'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row19' value='Column 1 content 19'></td><td><input class='mytextbox' type='text' name='col2row19' value='Column 2 content 19'></td><td><input class='mytextbox' type='text' name='col3row19' value='Column 3 content 19'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row20' value='Column 1 content 20'></td><td><input class='mytextbox' type='text' name='col2row20' value='Column 2 content 20'></td><td><input class='mytextbox' type='text' name='col3row20' value='Column 3 content 20'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row21' value='Column 1 content 21'></td><td><input class='mytextbox' type='text' name='col2row21' value='Column 2 content 21'></td><td><input class='mytextbox' type='text' name='col3row21' value='Column 3 content 21'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row22' value='Column 1 content 22'></td><td><input class='mytextbox' type='text' name='col2row22' value='Column 2 content 22'></td><td><input class='mytextbox' type='text' name='col3row22' value='Column 3 content 22'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row23' value='Column 1 content 23'></td><td><input class='mytextbox' type='text' name='col2row23' value='Column 2 content 23'></td><td><input class='mytextbox' type='text' name='col3row23' value='Column 3 content 23'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row24' value='Column 1 content 24'></td><td><input class='mytextbox' type='text' name='col2row24' value='Column 2 content 24'></td><td><input class='mytextbox' type='text' name='col3row24' value='Column 3 content 24'></td></tr><tr><td><input class='mytextbox' type='text' name='col1row25' value='Column 1 content 25'></td><td><input class='mytextbox' type='text' name='col2row25' value='Column 2 content 25'></td><td><input class='mytextbox' type='text' name='col3row25' value='Column 3 content 25'></td></tr></tbody>
</table>

</div>
</div>

<table style="width:200px;"><tr><td><div style="background:#6622DD; color:#FFFFFF;"><a href="#">Hello</a></div></td><td>No Link</td></tr></table>


<hr>
<form action=index.php method=POST>
<input type='radio' name='myradio[]' value='myradio0'><input 
type=submit name="Sent" value="Send Radio[s]">
</form>

</body>
</html>

I pulled this together, works on FF, IE7, and Safari for Windows, and also Validates. Has input text boxes also and as long as the inputs don't have focus,(that is none has the blinking cursor inside) you can scroll down using the arrow keys.

Once you click inside one of the input boxes, you'll have to click somewhere on the table outside the boxes so you can scroll with the arrow keys.

You can customize colors and even add background images if you want to.

Of course this is a 3 column example, you'll have to modify a bit if you want more columns.

Here it is in action

NOTE: Yahoo's side Bar causes it to not Validate, but my code alone does validate.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Sorry forgot to remove some non related stuff.

Ignore all this at the end of the code:
Code: 
<table style="width:200px;"><tr><td><div style="background:#6622DD; color:#FFFFFF;"><a href="#">Hello</a></div></td><td>No Link</td></tr></table>


<hr>
<form action=index.php method=POST>
<input type='radio' name='myradio[]' value='myradio0'><input
type=submit name="Sent" value="Send Radio[s]">
</form>

The real code ends at the last </div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks Vacunita. That works really well but do you know if it's possible to eliminate the input type=text so the user can scroll with the arrow keys and if they do want to edit a field they just double-click or hit enter on it like
When they click outside of the box being edited or they hit enter the arrows return to normal for scrolling.

Also can the information still be submitted as in a POST or GET if input type=text fields are not used?

Thanks!
 
Upvote 0 Downvote
As it stands if you click outside the textbox, such as in between the cells, you can resume scrolling with the arrow keys normally.

I suppose you could use javascript to catch the enter key press and give focus back to the scrolling div so it can scroll.

Not sure you could do away with the input types if you want to send the data back through the form to be updated.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
691
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
200
Alt255
Alt255
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
704
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top