[英]Responsive Bootstrap Table with Sticky Header
I have a table.我有一张桌子。 The only CSS I am adding to the standard Bootstrap library is the following to implement the sticky header:
我添加到标准 Bootstrap 库的唯一 CSS 是以下用于实现粘性标头的 CSS:
.table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; }
<div class="table-responsive p-0 mt-2"> <table class="table table-sm table-striped table-hover table-sticky"> <thead> <tr> <th>#</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>1,001</td> <td>Lorem</td> <td>ipsum</td> <td>dolor</td> <td>sit</td> </tr> <tr> <td>1,002</td> <td>amet</td> <td>consectetur</td> <td>adipiscing</td> <td>elit</td> </tr> </tbody> </table> </div>
The sticky header worked until I wrapped the table in the div.table-responsive
.粘性标题一直有效,直到我将表格包裹在
div.table-responsive
。 How do I allow these to co-exist?我如何让这些共存?
There's no way to co-exist a position: sticky
inside a .table-responsive
without re-implementing the latter.没有办法共存一个
position: sticky
在.table-responsive
而不重新实现后者。
My solution ended up to be using .table-responsive-sm
to refuse this trade-off when a responsive table is certainly not needed.当肯定不需要响应表时,我的解决方案最终使用
.table-responsive-sm
来拒绝这种权衡。
without any additionnal CSS, you can fix table head by removing table-responsive from the div and adding class="bg-white sticky-top border-bottom" class to table tag.没有任何额外的 CSS,您可以通过从 div 中删除 table-responsive 并将 class="bg-white sticky-top border-bottom" 类添加到 table 标签来修复 table head。 Like this
像这样
<div class="table">
<table class="table">
<thead>
<tr>
<th class="bg-white sticky-top border-bottom">FirstName</th>
<th class="bg-white sticky-top border-bottom">LastName</th>
<th class="bg-white sticky-top border-bottom">Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Cooker</td>
<td>A1</td>
</tr>
<tr>
<td>David</td>
<td>Jeferson</td>
<td>A2</td>
</tr>
...
</table>
</div>
In this case you need to code it yourself.在这种情况下,您需要自己编写代码。 Following JS will do the job:
以下 JS 将完成这项工作:
var element = document.getElementById("fixed-thead");
var parentElement = element.parentElement;
window.addEventListener('scroll', () => {
var coordinates = parentElement.getBoundingClientRect();
if (coordinates.y < 0) {
element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
} else {
element.style.transform = 'translate3d(0,0,0)';
}
}
And in your table mark thead
with id="fixed-thead"
like this:在你的表中用
id="fixed-thead"
标记thead
,如下所示:
<thead id="fixed-thead">
I use translate3d
to enable hardware acceleration to make it smoother.我使用
translate3d
来启用硬件加速以使其更流畅。 If user uses wheel to scroll scroll event is triggering very ofter I recommend using debouncing of scroll events.如果用户使用滚轮滚动滚动事件触发非常频繁,我建议使用滚动事件的去抖动。
In case your table has column with fixed with you can use setting position: fixed
and top: 0
instead of translate3d
.如果您的表具有固定列,您可以使用设置
position: fixed
和top: 0
而不是translate3d
。 But in case of a variable length translate3d
is preferred.但在可变长度的情况下,
translate3d
是首选。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.