How to scrolling table with fixed header in HTML?

By Hardik Savani | March 1, 2016 | | 2782 Viewer | Category : HTML CSS


Share this post:

Sometimes you require 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="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>