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.
