Deepika Bansal
Reputation: 31
how to fix header of my table in javascript/html/jquery
I have made an html javascript page. The problem which I’am facing is :
There are 2 scroll bars on my page, on scrolling the inner scroll bar which is corresponding to my table, I want that my table headers should remain fix, and the Rows should move down as they are moving down now.
I want that table header should remain fixed, so that at any time, user can see the column names header for any row.
On scrolling the outer scroll bar, there is no such requirement.
Is there any way of doing that ?
here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.content {
padding: 15px 40px;
overflow: auto;
height: 565px;
}
#abc {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#abc td, #abc th {
border: 2px solid #ddd;
padding:8px;
}
#abc td {
padding-left:20px;
font-size:14px;
}
#abc tr:nth-child(even){background-color: #f2f2f2;}
#abc tr:hover {background-color: #ddd;}
#abc th {
padding-top: 12px;
padding-bottom: 10px;
text-align: center;
background-color: #000000b3;
color: #FFFFFF;
}
#abc td + td {
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Here is my code.
Here is my code.
Here is my code.
Here is my code.
Here is my code.
</p>
<p>
Here is my code.
<br/>
Here is my code.
</p>
<p>Here is my code.</p>
<div>
<div>
<div class="content">
<table id="abc" style="width:100%" >
<div>
<thead>
<tr>
<th width="10%">column_1 </th>
<th width="60%">column_2 </th>
<th width="20%">column_3 </th>
<th width="10%">column_4 </th>
</tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</thead>
</div>
<tbody>
</tbody>
</table>
<p>
Here is my code.
<br/>
Here is my code.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Regards
Upvotes: 0
Views: 165
Answers (1)
Coder
Reputation: 99
Please see updated code. I hope it help. Using position:sticky and top:0 for <th> tag will solve the problem. I have cleaned your html too. Please see below code.
HTML
<body>
<div>
<p>Here is my code. Here is my code. Here is my code. Here is my code. Here is my code.
</p>
<p>
Here is my code.
<br/> Here is my code.
</p>
<p>Here is my code.</p>
<div>
<div>
<div class="content">
<table id="abc" style="width:100%">
<div>
<thead>
<tr>
<th width="10%">column_1 </th>
<th width="60%">column_2 </th>
<th width="20%">column_3 </th>
<th width="10%">column_4 </th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</tbody>
</div>
</table>
<p>
Here is my code.
<br/> Here is my code.
</p>
</div>
</div>
</div>
</div>
</body>
CSS
<style>
.content {
padding: 0px 40px;
overflow: auto;
height: 565px;
}
#abc {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#abc td,
#abc th {
border: 2px solid #ddd;
padding: 8px;
}
#abc td {
padding-left: 20px;
font-size: 14px;
}
#abc tr:nth-child(even) {
background-color: #f2f2f2;
}
#abc tr:hover {
background-color: #ddd;
}
#abc th {
padding-top: 12px;
padding-bottom: 10px;
text-align: center;
background-color: #000000;
color: #FFFFFF;
position: sticky;
top: 0;
}
#abc td+td {
text-align: center;
}
</style>
Upvotes: 1
Related Questions
- Trying to fix table header, getting css issue
- HTML Table Header Styling using jQUery
- Javascript Fix Table Header
- Table header JavaScript
- Style floating table headers
- How get header of the table fixed ?
- How can I keep this table header fixed?
- Dynamic table header fixing issue
- fixed headers in table, html
- Fix header in a table