Home CSS How to scrolling table with fixed header in HTML?

How to scrolling table with fixed header in HTML?

by Shahriar Sagor
scrolling table with fixed header

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 How to scrolling table with fixed header in HTML?

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.

close

You may also like