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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.