The table function is essential for the display of data in a single frame on the web page. The html table element shows the information and displays user-attractive functionality in minimum space on the page. The CSS styles the table and its information using the elements and tags.
The fixed table header must remain at the top of the web page layout to enhance user interaction. This stationary header visually links the table data, correlating each column with its respective values.
Approaches to Create Fixed Table Header in CSS
The CSS employs various properties to create a fixed header for tables. One method involves utilizing CSS position and top properties. In this approach, the position property is set to 'sticky' and the top property is adjusted to 0 or negative values. Another technique involves using CSS display and overflow properties. Here, the display property is set to 'block' while the height is defined alongside vertical overflow properties.
Using CSS position and top properties
The CSS employs the position and top attributes to achieve a sticky header effect. The position attribute utilizes the sticky value, while the top attribute can take either a zero (0) or negative (-1) value based on the specific needs. These attributes are commonly applied to the table's header or footer elements.
Syntax
The syntax below is employed to generate a static header for the table. You can utilize the "th" tag, "thead" tag, or table name to implement CSS styles.
<head>
<style>
th {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Col umn name </th>
?.
</tr>
</thead>
</table>
</body>
Examples
The provided illustration demonstrates the sticky or fixed header of a table using different CSS attributes.
Example 1:
The illustration demonstrates the fundamental sticky behavior of a table header. Sticky positioning is applied to the header element of the table.
<!DOCTYPE html>
<html>
<head>
<title> How to Create Fixed Table Header in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.fixedheader {
overflow-y: auto;
height: 150px;
}
.fixedheader thread th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 14px;
border: 2px solid navy;
}
th {
background: orange;
}
</style>
</head>
<body>
<h3> How to Create Fixed Table Header in CSS </h3>
<div class = "fixedheader">
<table>
<thead>
<tr>
<th> SR.NO </th>
<th> First Name </th>
<th> Last Name </th>
<th> Place </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Adam </td>
<td> Abdul </td>
<td> Australia </td>
</tr>
<tr>
<td> 2 </td>
<td> Ram </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 3 </td>
<td> Rani </td>
<td> Abdul </td>
<td> UK </td>
</tr>
<tr>
<td> 4 </td>
<td> Merry </td>
<td> Smith </td>
<td> UK </td>
</tr>
<tr>
<td> 5 </td>
<td> Shyam </td>
<td> Samanth </td>
<td> India </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
The output shows the fixed header of the table.
Example 2:
The illustration displays the headers of the table. Both tables showcase data with sticky positioning for the headers. As the first table's data is viewed, its header remains fixed at the top of the viewport. Upon switching to the second table, the first table's header becomes inactive while the second table's header sticks to the webpage.
<!DOCTYPE html>
<html>
<head>
<title> How to Create Fixed Table Header in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.fixedheader {
overflow-y: auto;
height: 150px;
}
thead {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 14px;
border: 2px solid navy;
}
#id1{
background: orange;
}
#id2{
background: navy;
color: white;
}
</style>
</head>
<body>
<h3> How to Create Fixed Table Header in CSS </h3>
<div class = "fixedheader">
<table>
<thead id="id1">
<tr>
<th> SR.NO </th>
<th> First Name </th>
<th> Last Name </th>
<th> Place </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Adam </td>
<td> Abdul </td>
<td> Australia </td>
</tr>
<tr>
<td> 2 </td>
<td> Ram </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 3 </td>
<td> Rani </td>
<td> Abdul </td>
<td> UK </td>
</tr>
<tr>
<td> 4 </td>
<td> Merry </td>
<td> Smith </td>
<td> UK </td>
</tr>
<tr>
<td> 5 </td>
<td> Shyam </td>
<td> Samanth </td>
<td> India </td>
</tr>
</tbody>
<thead id="id2">
<tr>
<th> SR.NO </th>
<th> First Name </th>
<th> Last Name </th>
<th> Place </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Sam </td>
<td> smith </td>
<td> Australia </td>
</tr>
<tr>
<td> 2 </td>
<td> Sourbh </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 3 </td>
<td> Ranvijay </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 4 </td>
<td> Abdul </td>
<td> Abdul </td>
<td> Bhutan </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
The output shows the fixed header of the table.
Using CSS Display and Overflow Properties
CSS employs different attributes to achieve a stationary header while scrolling through the table content. It renders the table as a block for both the "tr" and "tbody" elements. The "body" element is responsible for enabling horizontal and vertical scrolling functionalities within the table.
Syntax
The syntax below is employed to establish a static header along with a scrollable body within the table.
<head>
<style>
tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
thead tr {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Col umn name </th>
?.
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
Description
- The "th" tag and "thead" tag are used as the display property with the block value.
- The "tbody" tag displays overflow and height properties to fix the table's header.
- The height is used according to the table size, and the overflow property has the "auto" value.
Examples
The given example demonstrates the table's persistent header styled using various CSS attributes.
Example 1:
The provided demonstration illustrates the stationary header featuring fundamental CSS attributes. The displayed table exhibits a persistent header and a scrollable body achieved through the implementation of the overflow and height properties.
<!DOCTYPE html>
<html>
<head>
<title> How to Create Fixed Table Header in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.fixedheader {
width: 500px;
table-layout: fixed;
border-collapse: collapse;
}
.fixedheader tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixedheader thead tr {
display: block;
}
.fixedheader th,
.fixedheader td {
padding: 8px 15px;
width: 200px;
padding-left: 50px;
}
th {
background: yellow;
}
</style>
</head>
<body>
<h3> How to Create Fixed Table Header in CSS </h3>
<p> We can scroll the body of the table and fix the header on top of the page. </p>
<div class = "fixedheader" style = "border: 2px solid black;">
<table style = "border: 2px solid black;">
<thead>
<tr>
<th> SR.NO </th>
<th> First Name </th>
<th> Last Name </th>
<th> Place </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Adam </td>
<td> Abdul </td>
<td> Australia </td>
</tr>
<tr>
<td> 2 </td>
<td> Ram </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 3 </td>
<td> Rani </td>
<td> Abdul </td>
<td> UK </td>
</tr>
<tr>
<td> 4 </td>
<td> Merry </td>
<td> Smith </td>
<td> UK </td>
</tr>
<tr>
<td> 5 </td>
<td> Shyam </td>
<td> Samanth </td>
<td> India </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
The output shows the fixed header of the table.
Example 2:
The illustration demonstrates the stationary placement of the two tables. The table header remains fixed while the content scrolls as needed.
<!DOCTYPE html>
<html>
<head>
<title> How to Create Fixed Table Header in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.fixedheader {
width: 500px;
table-layout: fixed;
border-collapse: collapse;
}
.fixedheader tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixedheader thead tr {
display: block;
}
.fixedheader th,
.fixedheader td {
padding: 8px 15px;
width: 200px;
padding-left: 50px;
border-bottom : 1px solid black;
}
#id1 {
background: yellow;
}
#id2 {
background: yellow;
}
</style>
</head>
<body>
<h3> How to Create Fixed Table Header in CSS </h3>
<p> We can scroll the body of the table and fix the header on top of the page. </p>
<div class = "fixedheader" style = "border: 2px solid black;">
<table>
<thead id="id1">
<tr>
<th> SR.NO </th>
<th> First Name </th>
<th> Last Name </th>
<th> Place </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Adam </td>
<td> Abdul </td>
<td> Australia </td>
</tr>
<tr>
<td> 2 </td>
<td> Ram </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 3 </td>
<td> Rani </td>
<td> Abdul </td>
<td> UK </td>
</tr>
<tr>
<td> 4 </td>
<td> Merry </td>
<td> Smith </td>
<td> UK </td>
</tr>
<tr>
<td> 5 </td>
<td> Shyam </td>
<td> Samanth </td>
<td> India </td>
</tr>
</tbody>
<thead id="id2">
<tr>
<th> SR.NO </th>
<th> First Name </th>
<th> Last Name </th>
<th> Place </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Sam </td>
<td> smith </td>
<td> Australia </td>
</tr>
<tr>
<td> 2 </td>
<td> Sourbh </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 3 </td>
<td> Ranvijay </td>
<td> Abdul </td>
<td> India </td>
</tr>
<tr>
<td> 4 </td>
<td> Abdul </td>
<td> Abdul </td>
<td> Bhutan </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
The output shows the fixed header of the table.
Conclusion
The stationary table header is an essential component for user-engaging and sizable tables. It assists in structuring tables and presenting table data interactively.