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>.
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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
25 Mar, 2021
Like Article
Save Article