Sometimes you need to create scroll table and header must be fixed in your website or project. You can do it easily. I show you two example of scrolling table with fixed header and you can see and implement in your website. Let’s see first example:
Example-1
<html>
<head>
<title>Table Scroll with fixed header</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="625">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="600">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:625px; height:48px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" width="600">
<tr>
<td>data 1/1</td>
<td>data 1/2</td>
</tr>
<tr>
<td>data 2/1</td>
<td>data 2/2</td>
</tr>
<tr>
<td>data 3/1</td>
<td>data 3/1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>Example-2
<html>
<head>
<title>Fixed Header - Scrollable Table</title>
<style type="text/css">
table#header th {
border-right: solid 1px #000
}
table#header th#right-border {
padding: 0 4px 0 3px;
border-right: none;
}
table#tbl-content td {
border-bottom: solid 1px #bbb;
border-right: solid 1px #bbb;
}
table#tbl-content tr#bottom td {
border-bottom: none;
}
#box {
width: 100%;
height: 100px;
overflow-y: auto;
border: solid 1px #000;
border-top: none;
}
#tbl-content {
width: 790px;
table-layout: fixed;
background: #fff;
}
#header {
width: 790px;
text-align: left;
table-layout: fixed;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content" style="width:807px;">
<div id="boundary" style="margin-right:-2px;background:darkkhaki;border:solid 1px #000;">
<table id="header" cellpadding="3" cellspacing="0" border="0">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</table>
</div>
<div id="box">
<table id="tbl-content" cellpadding="3" cellspacing="0" border="0">
<tr>
<td>1</td>
<td>Haresh</td>
<td>Patel</td>
<td>test@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Mahesh</td>
<td>Rathod</td>
<td>test2@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Paresh</td>
<td>Patel</td>
<td>test3@gmail.com</td>
</tr>
<tr>
<td>4</td>
<td>John</td>
<td>Corter</td>
<td>test4@gmail.com</td>
</tr>
<tr>
<td>5</td>
<td>Mike</td>
<td>Chadns</td>
<td>test5@gmail.com</td>
</tr>
<tr>
<td>6</td>
<td>Temi</td>
<td>Marsh</td>
<td>test6@gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>Hope you it helps
