Bootstrap 在桌子上冻结头 [英] Bootstrap Freeze thead on table
问题描述
我正在尝试冻结 html 表 (thead) 中的第一行，但是当我尝试以下 CSS 代码时:
table {宽度:100%！重要；}头，体{显示:块；}tr:在{之后内容: ' ';显示:块；可见性:隐藏；清楚:两者；}头 th {高度:30px；}身体{高度:500px；溢出-y:自动；}thead 与 tbody 的大小不同.tbody 是可滚动的，thead 处于固定位置，但不一样，tr 聚集在一起.这是我的 HTML:
<头><tr><th>aaa</th><th>aaa</th><th>aaa</th><th>aaa</th><th>aaa</th></tr></thead><tr><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td></tr><tr><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td></tr><tr><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td></tr><tr><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td></tr><tr><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td><td>啊啊啊啊</td></tr></tbody>
这是
为此，您需要将表格包裹在具有 看看它是否有效: 更新:为不支持 I am trying to freeze my first row in my html table (thead) but when I try the following CSS code: The thead is not the same size as the tbody. the tbody is scrollable to the thead is in a fixed position, but not the same, the tr's are bunched up together. Here is my HTML: Here is the DEMO I tried to put together, but the Bootstrap I added appears not to be working so excuse the lack of styling: This is the result I get: For this to work you need to wrap your table in an element with See it working:
Updated: Added JS for browsers without support for 这篇关于Bootstrap 在桌子上冻结头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！position:relative、height 的元素中> 或 max-height(注意某些版本的 IE 在 max-height 中的 calc() 有/有一些问题)可由浏览器翻译成物理大小，并应用于粘性 内的每个 th/td sticky-top 类，或者，如果您更喜欢以下 CSS:位置:粘性；顶部:0；z-索引:1020；"use strict";var StickySituation = 函数stickySituation(o) {return $("".concat(o, " .sticky-top")).css('position') === 'fixed';};var updateStickyHeader = 函数 updateStickyHeader(i, e) {var cell = $("tbody tr>*:nth-child(".concat(i + 1, ")"), $(e).closest('table')).eq(0)[0];如果(单元格){var box = cell.getBoundingClientRect();$(e).css({顶部:0，宽度:box.width，高度:box.height，左:box.left});}};$(window).on('load', function () {var sh = '.table-responsive.sticky-headers';$('thead th').addClass('sticky-top bg-white');如果(粘性情况(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 {最大高度:100vh；/* 任何有意义的 */溢出-y:自动；}.table-responsive .sticky-top {边界顶部:0；边框底部:0；box-shadow: 0 1px 0 0 Gainsboro;/* IE 破解:*/位置:固定；位置:粘性；}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="样式表"/><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"><头><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">句柄</th></tr></thead><tr><th scope="row">1</th><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><th scope="row">3</th><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><th scope="row">4</th><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">5</th><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><th scope="row">6</th><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><th scope="row">7</th><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">8</th><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><th scope="row">9</th><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody>position:sticky(即:IE)的浏览器添加了JS.
现代浏览器只需要脚本中的 23 行(它只将 sticky-top 和 bg-white 类添加到每个 <;th>，这显然可以手动完成).
这就是说您实际上并不需要现代浏览器中的 JS 部分来使其工作(只要您将类(或 CSS 规则)应用于标记，如上所述).table {
width: 100% !important;
}
thead, tbody {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
}
tbody {
height: 500px;
overflow-y: auto;
}
<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>
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;
"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>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).
登录
关闭
