ADVERTISEMENT
ADVERTISEMENT

Table Fixed Header and Scrollable Body

By using the CSS, learn how to create a table which has the fix the headers of a table?
Submitted by Apurva Mathur, on June 20, 2022

We can simply achieve this target by using the property named table-layout.

So what is so special about this property?

Let's see, what the table-layout property is?

CSS table-layout Property

This is a property that is commonly used when we are working with tables (i.e. rows and columns). This property helps us to format the table efficiently.

It has the following values:

  • auto: As the name suggests, this value does the same as it sounds. This property automatically formats the table. It centrally sets the width of the cell according to the content displayed inside the cell (the cell here represents the 1 box it can be row-wise or column-wise.)
  • fixed: This value allows the user to fix the width of the table as per the requirement. This value will set the width of the whole table according to the first row of the table.
  • inherit: In simple words, inheritance means taking features/property from the parent element.
    For example, children get some features of their parents.
    This same concept is applied here; the child property will inherit the property of the parent element.

Now let us see, how we can fix the table header with scrollable body?

The first step is to simply write the code under the table tag which will insert the record in a table format.

For this I've used the following tags:

  • <table>: Whenever we want to write any content in the table format, it's important to write that content inside the table tag. This tag is the initialization of the table.
  • <thead>: This tag contains the header of the columns.
  • <th>: This tag is used as header cells. We use this tag inside <tr> tag. It mainly consists of the header part of the table.
  • <td>: This tag is commonly called a data cell because this tag contains the data/information part of the cell. Whenever we want to insert inside the cell which is not the header then we use this tag.
  • <tr>: This tag is used to define the row in a table.

Example of default table:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Table fixed header and scrollable body</title>
   </head>
   <body>
      <table>
         <thead>
            <tr>
               <th>Name</th>
               <th>Department</th>
               <th>Salary</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>johnathan</td>
               <td>Computer science</td>
               <td>500000</td>
            </tr>
            <tr>
               <td>Anand</td>
               <td>Mechanical</td>
               <td>80000</td>
            </tr>
            <tr>
               <td>Kiara</td>
               <td>IT</td>
               <td>800000</td>
            </tr>
            <tr>
               <td>Kiran</td>
               <td>Electronics</td>
               <td>78000</td>
            </tr>
            <tr>
               <td>shyam</td>
               <td>Computer science</td>
               <td>70000</td>
            </tr>
            <tr>
               <td>sonam</td>
               <td>Computer science</td>
               <td>80000</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output:

Example 1: Table Fixed Header and Scrollable Body

Now, second step is to apply the CSS which will fix the header of this table. For this, I've used table-layout:fixed property to hit this target.

Let us first see the complete code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Table fixed header and scrollable body</title>
   </head>
   <style>
      table {
      table-layout: fixed;
      }
      td,th {
      padding: 5px;
      min-width: 200px;
      }
      th{
      position: sticky;
      }
      thead tr {
      background:lightblue;
      color: black;
      display: block;
      }
      tbody {
      display: block;
      height: 200px;
      width: 100%;
      overflow-y: auto;
      }
      tbody tr:nth-child(even) {
      background: lavender;
      }
   </style>
   <body>
      <table>
         <thead>
            <tr>
               <th>Name</th>
               <th>Department</th>
               <th>Salary</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>johnathan</td>
               <td>Computer science</td>
               <td>500000</td>
            </tr>
            <tr>
               <td>Anand</td>
               <td>Mechanical</td>
               <td>80000</td>
            </tr>
            <tr>
               <td>Kiara</td>
               <td>IT</td>
               <td>800000</td>
            </tr>
            <tr>
               <td>Kiran</td>
               <td>Electronics</td>
               <td>78000</td>
            </tr>
            <tr>
               <td>shyam</td>
               <td>Computer science</td>
               <td>70000</td>
            </tr>
            <tr>
               <td>sonam</td>
               <td>Computer science</td>
               <td>80000</td>
            </tr>
            <tr>
               <td>Aditya</td>
               <td>Civil</td>
               <td>70000</td>
            </tr>
            <tr>
               <td>Anchal</td>
               <td>Computer science</td>
               <td>20000</td>
            </tr>
            <tr>
               <td>Kanan</td>
               <td>IT</td>
               <td>90000</td>
            </tr>
            <tr>
               <td>shaurya</td>
               <td>Mechnical</td>
               <td>10000</td>
            </tr>
            <tr>
               <td>Diya</td>
               <td>Civil</td>
               <td>30000</td>
            </tr>
            <tr>
               <td>Hena</td>
               <td>Electronics</td>
               <td>40000</td>
            </tr>
            <tr>
               <td>Bhavya</td>
               <td>Computer science</td>
               <td>30000</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output:

Example 2: Table Fixed Header and Scrollable Body

Explanation:

Talking about the CSS code, the foremost thing is to fix the table layout as it will set the width as per the requirement, moving further basic padding, margin, color, etc properties have been applied which will just set the content and table cells. The important thing in the code is overflow-y: auto; This property will fix the width at the y-axis which will give a scrollable body to the table.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.