How to Scrolling Table with Fixed Header in HTML?

By Hardik Savani February 1, 2023 Category : HTML CSS

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

Read Also: How to Convert HTML to PDF in Python?
<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>

I hope it can help you...

Tags :
Previous

Laravel 5 import export to excel and csv using maatwebsite example.
Next

Laravel Join with Subquery in Query Builder Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares