How to create a table with fixed header and scrollable body ? - GeeksforGeeks

25 Mar, 2021
The purpose of this article is to create a table with a fixed header and scrollable body. We can create such a table with either of the two approaches.
By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element.By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.
By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element.
By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.
Note: 
The position property states the type of positioning for an element.
The display property states that how an element should be displayed.
Example: Below is the code which illustrates the formation of table with position property.
HTML
<!DOCTYPE html><html>  <head>  <style>    .fixTableHead {      overflow-y: auto;      height: 110px;    }    .fixTableHead thead th {      position: sticky;      top: 0;    }    table {      border-collapse: collapse;              width: 100%;    }    th,    td {      padding: 8px 15px;      border: 2px solid #529432;    }    th {      background: #ABDD93;    }  </style></head>  <body>  <div class="fixTableHead">    <table>      <thead>        <tr>          <th>Col 1</th>          <th>Col 2</th>        </tr>      </thead>        <tbody>        <tr>          <td>1.1</td>          <td>2.1</td>        </tr>        <tr>          <td>1.2</td>          <td>2.2</td>        </tr>        <tr>          <td>1.3</td>          <td>2.3</td>        </tr>        <tr>          <td>1.4</td>          <td>2.4</td>        </tr>        <tr>          <td>1.5</td>          <td>2.5</td>        </tr>      </tbody>            </table>  </div></body>  </html>
Output:
Example 2: Below is the code which illustrates the formation of table with display property.
HTML
<!DOCTYPE html><html>  <head>  <style>    .tableFixHead {      width: 500px;      table-layout: fixed;      border-collapse: collapse;    }      .tableFixHead tbody {      display: block;      width: 100%;      overflow: auto;      height: 50px;    }    .tableFixHead thead tr {      display: block;    }    .tableFixHead th,    .tableFixHead  td {      padding: 5px 10px;      width: 200px;    }    th {      background: #ABDD93;    }  </style></head>  <body>  <div class="tableFixHead">    <table>      <thead>        <tr>          <th>Col 1</th>          <th>Col 2</th>        </tr>      </thead>      <tbody>        <tr>          <td>1.1</td>          <td>2.1</td>        </tr>        <tr>          <td>1.2</td>          <td>2.2</td>        </tr>        <tr>          <td>1.3</td>          <td>2.3</td>        </tr>        <tr>          <td>1.4</td>          <td>2.4</td>        </tr>        <tr>          <td>1.5</td>          <td>2.5</td>        </tr>      </tbody>    </table>  </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Attributes
HTML-Questions
HTML-Tags
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?