Bootstrap Freeze Thead On Table
I am trying to freeze my first row in my html table (thead) but when I try the following CSS code: table { width: 100% !important; } thead, tbody { display: block; } tr:a
Solution 1:
For this to work you need to wrap your table in an element with position: relative, a height or max-height (note some versions of IE have/had some trouble with calc() in max-height) translatable by browser into a physical size and to apply to each and every th/td inside your sticky <thead> the class of sticky-top or, if you prefer, the following CSS:
position: sticky;
top: 0;
z-index: 1020;
See it working:
"use strict";
var stickySituation = function stickySituation(o) {
return $("".concat(o, " .sticky-top")).css('position') === 'fixed';
};
var updateStickyHeader = function updateStickyHeader(i, e) {
var cell = $("tbody tr>*:nth-child(".concat(i + 1, ")"), $(e).closest('table')).eq(0)[0];
if (cell) {
var box = cell.getBoundingClientRect();
$(e).css({
top: 0,
width: box.width,
height: box.height,
left: box.left
});
}
};
$(window).on('load', function () {
var sh = '.table-responsive.sticky-headers';
$('thead th').addClass('sticky-top bg-white');
if (stickySituation(sh)) {
$(sh).css({
paddingTop: $('tbody tr>*:nth-child(1)', sh).eq(0).css('height')
});
$(window).on('resize', function () {
$('thead th').each(updateStickyHeader);
});
$(window).trigger('resize');
}
});.table-responsive {
max-height: 100vh;
/* whatever makes sense */
overflow-y: auto;
}
.table-responsive .sticky-top {
border-top: 0;
border-bottom: 0;
box-shadow: 0 1px 0 0 gainsboro;
/* hack for IE: */ position: fixed;
position: sticky;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="table-responsive position-relative sticky-headers">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Updated: Added JS for browsers without support for position: sticky (i.e: IE).
Modern day browsers only need line 23 from script (which only adds the sticky-top and bg-white classes to each <th>, which could obviously be done manually).
That is to say you don't actually need the JS part in modern browsers for this to work (as long as you apply the classes (or the CSS rules) to your markup, as stated above).
Solution 2:
try to implement this way.
$(".table_container").scroll(function(){
var topPosition = $(".table_container").scrollTop();
$("#MVCGridTable_Grid thead tr th").css({"top": (topPosition)});
});table {
width: 100% !important;
margin: 0 !important;
}
.table_container {
max-height: 180px;
overflow: auto;
position: relative;
}
thead tr th{
color: #fff;
text-align: left;
background-color: #000;
position: relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table_container">
<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
<thead>
<tr>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>I hope this solution is works for you.
I checked it for IE also, its shaking while scroll but works fine this is because of browser response in other browser it works smoothly.
Thank you...
Solution 3:
Having same request from client in current project. I just create sweet and simple code snippet. Try this i hope it'll help you out. Thanks
table thead th {
background-color: #fff;
box-shadow: 0.125rem 0 0.1875rem #dee2e6;
position: sticky;
top: 0;
z-index: 2;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
<thead>
<tr>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>Solution 4:
Just Modified your code, it is one of the possible solution you can try
table{
border-collapse: collapse;
}
table thead{
padding-right: 17px; // scroll width is 17px wide
}
thead th, td {
width: 100px;
height: 30px;
text-align: left;
word-break: break-all;
}
Solution 5:
Most probably you need to given particular width to table cells to achieve proper alignment with table body scroll.
table {
width: 100% !important;
border: 1px dashed #ddd;
}
thead, tbody {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
background-color: #ccc;
}
tbody {
max-height: 100px;
overflow-y: auto;
}
tr th, tr td {
width: 200px;
text-align:center;
height: 30px;
}<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
<thead>
<tr>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</tbody>
</table>You can check the scroll behaviour by running above code snippet.
Post a Comment for "Bootstrap Freeze Thead On Table"