I have a table that has a header, many rows, and a footer. Is it possible to make the header and footer remain in position and allow the main body of the table to be in a scrollable div (overflow:auto
?
One way I was thinking I could do it is to use seperate tables for the header and footer but then I'd need to set table widths on all 3 tables so they align properly - can this be done thru CSS?Here's a sample table...
<html>
<head>
<title>Sample</title>
<style type="text/css">
div {
height:200px;
width:400px;
overflow:auto;}
table {
width:99%;
border:1px solid black;}
thead {color:#F00;}
table>tbody {
overflow:auto;
height:120px;}
td {
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid black;}
tfoot {color:#F00;}
</style>
</head>
<body>
<p>This works in Netscape but not in IE. <br>
I want the table footer to remain static like the table header does. <br>
I could use 3 seperate tables but then I would need to find a way <br>
to have the column widths match.</p>
<div id="tbl">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Total 1</td>
<td>Total 2</td>
<td>Total 3</td>
<td>Total 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>It seems to me that making 3 tables is the only way to do it - I know you'd thought of that, but...
Please have a look at this and see what you think :
table (<!-- m --><a class="postlink" href="http://cheers-sendai.com/table.htm">http://cheers-sendai.com/table.htm</a><!-- m -->)
Please let me know what you think too - I'll be happy if this helps.
Cheers.I can get the thead to stat put but it's the table footer that doesn't work in IE. I had to manually set the column widths and use a second table for the footer.
Oh well, another good thing to do with the next release.I'm confused - you say the table foot won't stay where it is in IE.
It seems fine to me when I look at it in IE.
What's wrong?I'm trying to get the header and footer to stay in position while the table data is scrolled - so you see the header and footer at all times.It seems like you want to be able to scroll within the body and have the footer & header stay stationary. I wouldn't suggest going that route, but if you do, I beleive that frames or textbox are your only choices for getting that result.Originally posted by rsd
I'm trying to get the header and footer to stay in position while the table data is scrolled - so you see the header and footer at all times. That's what BonRouge's example does for me. Does it not work for you?His example contains 3 tables.
I need it to work cleanly with 1 table.Please have a look at this :
Table with static header, footer and column-widths. (<!-- m --><a class="postlink" href="http://www.cheers-sendai.com/table.htm">http://www.cheers-sendai.com/table.htm</a><!-- m -->)
I thought there must be a way to set a maximum column width so that they don't change. I think this is it.
This works in Firefox and in IE.
The table footer and table header remain static.
I've used 3 separate tables.
The column widths won't change because the cells are filled with divs which are all the same width. The overflow is hidden, so the size of the divs shouldn't change.
The width of the divs is set as a class (.cell). The width of the tables is set as another class (.tables).
Basically, I think if you have any data that is bigger than the width of these divs, you need to change the width in the .cell class. Then you need to change the width in the .table class to move the scrollbar to the right.use a javascript to get IE to behave:
<!-- m --><a class="postlink" href="http://www.thecodeproject.com/jscript/scrollable_table.asp?print=true">http://www.thecodeproject.com/jscript/s ... print=true</a><!-- m -->
force height on TBODY for Mozilla and set overflow:scroll
I just did this for a client a week ago...
?One way I was thinking I could do it is to use seperate tables for the header and footer but then I'd need to set table widths on all 3 tables so they align properly - can this be done thru CSS?Here's a sample table...
<html>
<head>
<title>Sample</title>
<style type="text/css">
div {
height:200px;
width:400px;
overflow:auto;}
table {
width:99%;
border:1px solid black;}
thead {color:#F00;}
table>tbody {
overflow:auto;
height:120px;}
td {
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid black;}
tfoot {color:#F00;}
</style>
</head>
<body>
<p>This works in Netscape but not in IE. <br>
I want the table footer to remain static like the table header does. <br>
I could use 3 seperate tables but then I would need to find a way <br>
to have the column widths match.</p>
<div id="tbl">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Total 1</td>
<td>Total 2</td>
<td>Total 3</td>
<td>Total 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>It seems to me that making 3 tables is the only way to do it - I know you'd thought of that, but...
Please have a look at this and see what you think :
table (<!-- m --><a class="postlink" href="http://cheers-sendai.com/table.htm">http://cheers-sendai.com/table.htm</a><!-- m -->)
Please let me know what you think too - I'll be happy if this helps.
Cheers.I can get the thead to stat put but it's the table footer that doesn't work in IE. I had to manually set the column widths and use a second table for the footer.
Oh well, another good thing to do with the next release.I'm confused - you say the table foot won't stay where it is in IE.
It seems fine to me when I look at it in IE.
What's wrong?I'm trying to get the header and footer to stay in position while the table data is scrolled - so you see the header and footer at all times.It seems like you want to be able to scroll within the body and have the footer & header stay stationary. I wouldn't suggest going that route, but if you do, I beleive that frames or textbox are your only choices for getting that result.Originally posted by rsd
I'm trying to get the header and footer to stay in position while the table data is scrolled - so you see the header and footer at all times. That's what BonRouge's example does for me. Does it not work for you?His example contains 3 tables.
I need it to work cleanly with 1 table.Please have a look at this :
Table with static header, footer and column-widths. (<!-- m --><a class="postlink" href="http://www.cheers-sendai.com/table.htm">http://www.cheers-sendai.com/table.htm</a><!-- m -->)
I thought there must be a way to set a maximum column width so that they don't change. I think this is it.
This works in Firefox and in IE.
The table footer and table header remain static.
I've used 3 separate tables.
The column widths won't change because the cells are filled with divs which are all the same width. The overflow is hidden, so the size of the divs shouldn't change.
The width of the divs is set as a class (.cell). The width of the tables is set as another class (.tables).
Basically, I think if you have any data that is bigger than the width of these divs, you need to change the width in the .cell class. Then you need to change the width in the .table class to move the scrollbar to the right.use a javascript to get IE to behave:
<!-- m --><a class="postlink" href="http://www.thecodeproject.com/jscript/scrollable_table.asp?print=true">http://www.thecodeproject.com/jscript/s ... print=true</a><!-- m -->
force height on TBODY for Mozilla and set overflow:scroll
I just did this for a client a week ago...