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 = functionstickySituation(o) {
return $("".concat(o, " .sticky-top")).css('position') === 'fixed';
};
var updateStickyHeader = functionupdateStickyHeader(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: 01px00 gainsboro;
/* hack for IE: */position: fixed;
position: sticky;
}<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><divclass="table-responsive position-relative sticky-headers"><tableclass="table table-striped"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr><tr><thscope="row">4</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">5</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">6</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr><tr><thscope="row">7</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">8</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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;
}
theadtrth{
color: #fff;
text-align: left;
background-color: #000;
position: relative;
}<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><divclass="table_container"><tableid="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
tabletheadth {
background-color: #fff;
box-shadow: 0.125rem00.1875rem#dee2e6;
position: sticky;
top: 0;
z-index: 2;
}<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"><tableid="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><scriptsrc="https://code.jquery.com/jquery-3.4.1.slim.min.js"integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><scriptsrc="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;
}
tablethead{
padding-right: 17px; // scroll width is 17px wide
}
theadth, 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;
}
theadth {
height: 30px;
background-color: #ccc;
}
tbody {
max-height: 100px;
overflow-y: auto;
}
trth, trtd {
width: 200px;
text-align:center;
height: 30px;
}<tableid="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"