Table with Fixed Header

Posted By : Gaurav Arora | 30-Dec-2016

Hi, In this blog we are creating a table with fixed header. I know that I can easily achieve the same result with bootstrap. But I have to do that without bootstrap. After using some table properties the result is as required.

Here comes our HTML part.

Heading 1 Heading 2 Heading 3 Heading 4
Text 1 Text 1 Text 1 Text 1
Text 2 Text 2 Text 2 Text 2

After that we will use our css part

table{border: 1px solid #ccc;
  border-collapse: collapse;
}
thead {
  width:100%;
  text-align: left;
}
tbody {
    display:block;
    max-height:160px;
    overflow-y:scroll;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
tr{
  border-bottom: 1px solid #ccc;
}
thead tr{
  border-bottom-width: 2px;
}
th{
  padding: 10px;
}
thead tr th:nth-child(2){
  padding-left: 7px;
}
thead tr th:nth-child(3){
  padding-left: 2px;
}
thead tr th:nth-child(4){
  padding-left: 0px;
}
 

The above css code has some mandatory properties that we have to use to make our header fixed, and the table body to work proper.

Like we have to make our tbody to display: block, max-height, overflow, tr to table-layout : fixed and display: table etc.

In the th we have to use custom padding to make them align to td because, there is a scroll to tbody due to which the alignment will be different.

In this way we can create a table with fixed header.

About Author

Author Image
Gaurav Arora

Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.

Request for Proposal

Name is required

Comment is required

Sending message..