How to scrolling table with fixed header in HTML?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →