I am trying to design a table that has a sticky thead and also sticky row headers. So, basically, all th elements must be sticky.
I have stumbled across the position: sticky css3 attribute that seems to be a great candidate for the job, even though it's not yet supported in many browsers (which is not an issue to me). However the MDN documentation says:
The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
Getting this into consideration, I have built a basic example that works in Safari 10.0, even though the borders of the sticky elements are not conserved.
In firefox 50.0, the borders get don't get displayed but the headers are not sticky.
So, my question is: how can I cleanly achieve this fixed header positioning by using position: sticky. It seems like the implementation (when implemented) is not complete and tables are even less supported.
If it's not possible, I am also open to a solution in JavaScript that achieves this (but adding jQuery to my stack would be quite cumbersome since my whole app is in react).
Here is a code snippet of what I have for now. Please note that in order to have some sticky headers, you basically need safari or the alpha version of chrome.
div#container {
height: 200px;
width: 300px;
overflow: auto;
}
table {
border-collapse: collapse;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
th {
background: #B8C1C8;
border: 2px solid black;
}
<div id="container">
<table>
<thead>
<tr>
<th>hehe</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
</tbody>
</table>
</div>
Resources I have tried:
a great article from typanus
Position sticky on thead that gave me a good lead on some clean usage of position: sticky
the position: sticky spec
Seems likes you have everything there. It's also called as freezed panes effect. A bit tuned version:
Forkable Codepen sample
Update: better borders.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
height: 20em;
overflow: scroll;
width: 50vw;
}
thead {
background-color: #eee;
color: gray;
left: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
thead th {
background-color: #ddd;
}
thead th,
thead td {
box-shadow: 0 0 0 1px #ccc;
}
tr {
border-bottom: thin solid #ddd;
width: 100%;
}
th,
td {
min-width: 20em;
padding: 0.5em;
}
th {
background-color: #eee;
box-shadow: 1px 0 0 0 #ccc;
left: 0;
min-width: 5em;
position: -webkit-sticky;
position: sticky;
}
<table>
<thead>
<tr>
<th></th>
<td>
A
</td>
<td>
B
</td>
<td>
C
</td>
<td>
D
</td>
</tr>
</thead>
<tbody></tbody>
<tr>
<th>
1
</th>
<td>
A 1
</td>
<td>
B 1
</td>
<td>
C 1
</td>
<td>
D 1
</td>
</tr>
<tr>
<th>
2
</th>
<td>
A 2
</td>
<td>
B 2
</td>
<td>
C 2
</td>
<td>
D 2
</td>
</tr>
<tr>
<th>
3
</th>
<td>
A 3
</td>
<td>
B 3
</td>
<td>
C 3
</td>
<td>
D 3
</td>
</tr>
<tr>
<th>
4
</th>
<td>
A 4
</td>
<td>
B 4
</td>
<td>
C 4
</td>
<td>
D 4
</td>
</tr>
<tr>
<th>
5
</th>
<td>
A 5
</td>
<td>
B 5
</td>
<td>
C 5
</td>
<td>
D 5
</td>
</tr>
<tr>
<th>
6
</th>
<td>
A 6
</td>
<td>
B 6
</td>
<td>
C 6
</td>
<td>
D 6
</td>
</tr>
<tr>
<th>
7
</th>
<td>
A 7
</td>
<td>
B 7
</td>
<td>
C 7
</td>
<td>
D 7
</td>
</tr>
<tr>
<th>
8
</th>
<td>
A 8
</td>
<td>
B 8
</td>
<td>
C 8
</td>
<td>
D 8
</td>
</tr>
<tr>
<th>
9
</th>
<td>
A 9
</td>
<td>
B 9
</td>
<td>
C 9
</td>
<td>
D 9
</td>
</tr>
<tr>
<th>
10
</th>
<td>
A 10
</td>
<td>
B 10
</td>
<td>
C 10
</td>
<td>
D 10
</td>
</tr>
<tr>
<th>
11
</th>
<td>
A 11
</td>
<td>
B 11
</td>
<td>
C 11
</td>
<td>
D 11
</td>
</tr>
<tr>
<th>
12
</th>
<td>
A 12
</td>
<td>
B 12
</td>
<td>
C 12
</td>
<td>
D 12
</td>
</tr>
<tr>
<th>
13
</th>
<td>
A 13
</td>
<td>
B 13
</td>
<td>
C 13
</td>
<td>
D 13
</td>
</tr>
<tr>
<th>
14
</th>
<td>
A 14
</td>
<td>
B 14
</td>
<td>
C 14
</td>
<td>
D 14
</td>
</tr>
<tr>
<th>
15
</th>
<td>
A 15
</td>
<td>
B 15
</td>
<td>
C 15
</td>
<td>
D 15
</td>
</tr>
<tr>
<th>
16
</th>
<td>
A 16
</td>
<td>
B 16
</td>
<td>
C 16
</td>
<td>
D 16
</td>
</tr>
<tr>
<th>
17
</th>
<td>
A 17
</td>
<td>
B 17
</td>
<td>
C 17
</td>
<td>
D 17
</td>
</tr>
<tr>
<th>
18
</th>
<td>
A 18
</td>
<td>
B 18
</td>
<td>
C 18
</td>
<td>
D 18
</td>
</tr>
<tr>
<th>
19
</th>
<td>
A 19
</td>
<td>
B 19
</td>
<td>
C 19
</td>
<td>
D 19
</td>
</tr>
<tr>
<th>
20
</th>
<td>
A 20
</td>
<td>
B 20
</td>
<td>
C 20
</td>
<td>
D 20
</td>
</tr>
</table>
Related
There should be a good way to alternate table row background colors based on class. Currently, I'm just doing something like this:
/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }
I would think there's a way to do something like:
table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }
Unfortunately, I'm not sure how to include all tr classes for the table and go even/odd based on that.
Suggestions?
Edit: Adding snipped/edited page code
table#table_organization tr.unsure,
tr.dept,
tr.org {
background-color: honeydew;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
Unfortunately CSS does not have a :nth-of-class pseudo selector. As long as the number of rows is very limited, using the adjacent sibling selector + could help (showing only for .dept):
.dept {
background: yellow;
}
.dept+.dept {
background-color: orange;
}
.dept+.dept+.dept {
background-color: red;
}
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
</table>
table#table_organization tr.unsure,
tr.dept:nth-of-type(odd),
tr.org {
background-color: honeydew;
}
tr.dept:nth-of-type(even){
background-color: red;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
In a node.js application: Is there a way to freeze the top row in a table, the title row, in the browser the way you can in Excel?
I suspect this is a .css style, but not sure how to do it. fixed "freezes" the entire table instead of just the top row in that as items appear in the non-visible part of the browser window, no vertical scroll bars appear so as to be able to see them. sticky appears to do nothing in this case.
.css
#one {
position: fixed;
top: 100px;
left: 15px;
}
app.js
<div className="row" id="one">
<table className="table-hover">
<thead>
Here's a solution of an Excel-like fixed table head with position: sticky; (classy and a personal favorite). Click on the first row to make it sticky:
th, td {
width: 100px;
height: 100px;
background-color: #eee;
text-align: center;
border-bottom: 2px solid transparent;
}
tr.sticks {
cursor: pointer;
}
tr.stuck th {
position: sticky;
top: 0px;
border-bottom: 2px solid #000;
}
<table>
<tbody>
<tr class="sticks" onclick='this.className = this.className == "sticks" ? "sticks stuck" : "sticks";'>
<th> Name </th>
<th> Amount </th>
<th> Date </th>
<th> Color </th>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
</tbody>
</table>
And here's a solution using JavaScript (less classy but with more usability). This one supports more than one row being stuck to the top. Again, click on a row to stick it:
td {
width: 100px;
height: 100px;
background-color: #eee;
text-align: center;
border-bottom: 2px solid transparent;
}
#table-head {
top: 0px;
position: fixed;
}
#table-head td {
border-bottom: 2px solid #000;
background-color: #ddd;
}
<table id="table">
<thead id="table-head"></thead>
<tbody id="table-body">
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr onclick="stick_it(this);">
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var table_head = document.getElementById("table-head");
var table_body = document.getElementById("table-body");
var stick_it = function(el) {
var row_html = el.outerHTML.replace("stick_it(this);", "unstick_it(this);");
el.remove();
table_head.innerHTML += row_html;
table.style.paddingTop = table_head.children.length * 104 + "px";
}
var unstick_it = function(el) {
var row_html = el.outerHTML.replace("unstick_it(this);", "stick_it(this);");
el.remove();
table_body.innerHTML += row_html;
table.style.paddingTop = table_head.children.length * 104 + "px";
}
</script>
I am using a custom template in shiny, and I want it to show a dataframe using the aesthetics of the template. For this reason, I need to parse this data frame:
data_frame(name=letters[1:5], value=1:5)
Source: local data frame [5 x 2]
name value
(chr) (int)
1 a 1
2 b 2
3 c 3
4 d 4
5 e 5
Into this
<tr>
<th scope="row">1</th>
<td>a</td>
<td>1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>b</td>
<td>2</td>
</tr>
<tr>
<th scope="row">3</th>
<td>c</td>
<td>3</td>
</tr>
And then put it in the index.html file using {{tableName}}. Which would be the most appropriate way?
ps:I am totally open to consider a different approach you think that mine does not make fully sense.
The print.xtable function has a 'type' argument that lets you construct html-tables
require(xtable)
require(dplyr)
obj <- data_frame(name=letters[1:5], value=1:5)
print( xtable(obj), type="html")
<!-- html table generated in R 3.2.3 by xtable 1.8-2 package -->
<!-- Sat Mar 19 16:57:05 2016 -->
<table border=1>
<tr> <th> </th> <th> name </th> <th> value </th> </tr>
<tr> <td align="right"> 1 </td> <td> a </td> <td align="right"> 1 </td> </tr>
<tr> <td align="right"> 2 </td> <td> b </td> <td align="right"> 2 </td> </tr>
<tr> <td align="right"> 3 </td> <td> c </td> <td align="right"> 3 </td> </tr>
<tr> <td align="right"> 4 </td> <td> d </td> <td align="right"> 4 </td> </tr>
<tr> <td align="right"> 5 </td> <td> e </td> <td align="right"> 5 </td> </tr>
</table>
I need your help,
I can't seem to figure out as to why the first row in the table (ABC-123-123456) disappears or appears to be hidden once the top columns are fixed. As my work uses IE7 still I need to be able to have a browser compliant sticky column headers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data_container {
margin-top: 5px;
width: 100%;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid #ccc;
position: relative;
color: rgb(60,60,60);
font-size: 9pt;
}
#data {
border-collapse:collapse;
border-spacing: 0;
border-right: 1px solid #ccc;
table-layout: fixed;
}
#data th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dcdcdc");
font-weight: normal;
}
#data tr {
text-align: center;
}
#data td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
text-align: left;
padding-left: 6px;
}
#data tr:hover td { background: #f2f2f2; }
#data th, #data td {
height: 20px;
width: 130px;
}
#data tr td:first-child, #data tr th:first-child {
border-left: 0;
}
#data thead tr {
top:expression(this.offsetParent.scrollTop);
position: absolute;
}
#data tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="data_container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th data-sort="string">File Number</th>
<th>Test Column</th>
<th>Request Type</th>
<th>Resize This</th>
<th>Firstname</th>
<th>Lastname</th>
<th data-sort="string">Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-942471</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>ABC-123-408126</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-396225</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-385417</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-374250</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-408970</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-404552</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-403102</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>ABC-123-404555</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>ABC-123-406789</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</body>
</html>
add this
#data tbody{
position: absolute;
top: 24px;
}
Remove position:absolute from #data thead tr.
jsfiddle
Is it possible in CSS using a property inside an #page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?
This is what the THEAD element is for. Official docs here.
Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
Opera 7.5 and IE 5 won't repeat headers no matter what you try.
(source)
Flying Saucer xhtmlrenderer repeats the THEAD on every page of PDF output, if you add the following to your CSS:
table {
-fs-table-paginate: paginate;
}
(It works at least since the R8 release.)
UPDATE: It looks like this may have been fixed in 2016! https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45
Original Answer (2012):
Before you implement this solution it's important to know that Webkit currently doesn't do this.
Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And on the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).
Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..
how do i print HTML table. Header and footer on each page
Also Work in Webkit Browsers
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PrintPage() {
document.getElementById('print').style.display = 'none';
window.resizeTo(960, 600);
document.URL = "";
window.location.href = "";
window.print();
}
</script>
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
}
thead
{
display: table-header-group;
}
tfoot
{
display: table-footer-group;
}
</style>
<style type="text/css" media="screen">
thead
{
display: block;
}
tfoot
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 500px; margin: 0 auto;">
<thead>
<tr>
<td>
header comes here for each page
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
<tr>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
</tr>
<tr>
<td>
10
</td>
</tr>
<tr>
<td>
11
</td>
</tr>
<tr>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
</tr>
<tr>
<td>
14
</td>
</tr>
<tr>
<td>
15
</td>
</tr>
<tr>
<td>
16
</td>
</tr>
<tr>
<td>
17
</td>
</tr>
<tr>
<td>
18
</td>
</tr>
<tr>
<td>
19
</td>
</tr>
<tr>
<td>
20
</td>
</tr>
<tr>
<td>
21
</td>
</tr>
<tr>
<td>
22
</td>
</tr>
<tr>
<td>
23
</td>
</tr>
<tr>
<td>
24
</td>
</tr>
<tr>
<td>
25
</td>
</tr>
<tr>
<td>
26
</td>
</tr>
<tr>
<td>
27
</td>
</tr>
<tr>
<td>
28
</td>
</tr>
<tr>
<td>
29
</td>
</tr>
<tr>
<td>
30
</td>
</tr>
<tr>
<td>
31
</td>
</tr>
<tr>
<td>
32
</td>
</tr>
<tr>
<td>
33
</td>
</tr>
<tr>
<td>
34
</td>
</tr>
<tr>
<td>
35
</td>
</tr>
<tr>
<td>
36
</td>
</tr>
<tr>
<td>
37
</td>
</tr>
<tr>
<td>
38
</td>
</tr>
<tr>
<td>
39
</td>
</tr>
<tr>
<td>
40
</td>
</tr>
<tr>
<td>
41
</td>
</tr>
<tr>
<td>
42
</td>
</tr>
<tr>
<td>
43
</td>
</tr>
<tr>
<td>
44
</td>
</tr>
<tr>
<td>
45
</td>
</tr>
<tr>
<td>
46
</td>
</tr>
<tr>
<td>
47
</td>
</tr>
<tr>
<td>
48
</td>
</tr>
<tr>
<td>
49
</td>
</tr>
<tr>
<td>
50
</td>
</tr>
<tr>
<td>
51
</td>
</tr>
<tr>
<td>
52
</td>
</tr>
<tr>
<td>
53
</td>
</tr>
<tr>
<td>
54
</td>
</tr>
<tr>
<td>
55
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
footer comes here for each page
</td>
</tr>
</tfoot>
</table>
</div>
<br clear="all" />
<input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
class="button" />
</form>
</body>
</html>