Today now in this blog i will show you how to scrolling table table with fixed header in html. Sometimes we need to create a scroll table and header must be fixed in our website or project. we can do it this easily. Here I will show you two example of scrolling table also with fixed the header and we can see and implement in our website. Let’s start and see the first example :
Example 1
<html>
<head>
<title>Table Scroll with fixed header</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:325px; height:48px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<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>
Read Also : Laravel and AngularJS CRUD with Search & Pagination Example
Thanks for read. I hope it help you. For more you can follow us on facebook.