我试图使一个表与固定标题和一个可滚动的内容使用引导3表。
不幸的是,我发现的解决方案不工作与bootstrap或混乱的风格。
这里有一个简单的bootstrap表,但由于某种原因,我不知道tbody的高度不是10px。
height: 10px !important; overflow: scroll;
例子:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
我使用floatThead jQuery插件(https://mkoryak.github.io/floatThead/#intro)
文档说它适用于Bootstrap 3表,我可以说它也适用于Bootstrap 4表,有或没有表响应帮助。
使用插件就像这样简单:
HTML(普通引导表标记)
<div class="table-responsive">
<table id="myTable" class="table table-striped">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
插件初始化:
$(document).ready(function() {
var tbl=$('#myTable');
tbl.floatThead({
responsiveContainer: function(tbl) {
return tbl.closest('.table-responsive');
}
});
});
完整的免责声明:
我没有以任何方式与插件相关联。在尝试了这里和其他地方发布的许多其他解决方案后,我碰巧发现了它。
对于满高的表格(页面滚动,而不是表格)
注意:我移动整个<thead>…</ header >因为在我的例子中,我有两行(标题和过滤器)
使用JS (jQuery)
$( function() {
let marginTop = 0; // Add margin if the page has a top nav-bar
let $thead = $('.table-fixed-head').find('thead');
let offset = $thead.first().offset().top - marginTop;
let lastPos = 0;
$(window).on('scroll', function () {
if ( window.scrollY > offset )
{
if ( lastPos === 0 )
{
// Add a class for styling
$thead.addClass('floating-header');
}
lastPos = window.scrollY - offset;
$thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
}
else if ( lastPos !== 0 )
{
lastPos = 0;
$thead.removeClass('floating-header');
$thead.css('transform', 'translateY(' + 0 + 'px)');
}
});
});
CSS(仅用于样式)
thead.floating-header>tr>th {
background-color: #efefef;
}
thead.floating-header>tr:last-child>th {
border-bottom: 1px solid #aaa;
}
根据@Roko C. Buljan的回答,如果你尝试添加行跨度,当你滚动时,只有第一个th会被固定。
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr>
<th rowspan="3">TH 1</th>
<th>TH 2.1</th>
<th>TH 3.1</th>
</tr>
<tr >
<th>TH 2.2</th>
<th>TH 3.2</th>
</tr>
<tr >
<th>TH 2.3</th>
<th>TH 3.3</th>
</tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
<tr><td>D1</td><td>D2</td><td>D3</td></tr>
<tr><td>E1</td><td>E2</td><td>E3</td></tr>
</tbody>
</table>
</div>
如果你想固定行跨度,你可以添加这行
.tableFixHead thead tr:nth-child(2) th {
top: 34px; /* change the number according to your need */
}
.tableFixHead thead tr:nth-child(3) th {
top: 68px; /* change the number according to your need */
}
作为示例,您可以检查这个片段
.tableFixHead { overflow: auto; height: 200px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead thead tr:nth-child(2) th {
top: 34px; /* change the number according to your need */
}
.tableFixHead thead tr:nth-child(3) th {
top: 68px; /* change the number according to your need */
}
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr>
<th rowspan="3">TH 1</th>
<th>TH 2.1</th>
<th>TH 3.1</th>
</tr>
<tr >
<th>TH 2.2</th>
<th>TH 3.2</th>
</tr>
<tr >
<th>TH 2.3</th>
<th>TH 3.3</th>
</tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
<tr><td>D1</td><td>D2</td><td>D3</td></tr>
<tr><td>E1</td><td>E2</td><td>E3</td></tr>
</tbody>
</table>
</div>
如果你用n -child(number)手动指定number,上面的代码段将正常工作
首先为引导表添加一些标记。在这里,我创建了一个条纹表,但也添加了一个自定义表类.table-scroll,它添加了垂直滚动条到表,并使表头固定,而向下滚动。
<div class="col-xs-8 col-xs-offset-2 well">
<table class="table table-scroll table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Jackson</td>
<td>Washington</td>
</tr>
<tr>
<td>2</td>
<td>Thomas</td>
<td>Marion</td>
<td>Jackson</td>
</tr>
<tr>
<td>3</td>
<td>Benjamin</td>
<td>Warren</td>
<td>Lincoln</td>
</tr>
<tr>
<td>4</td>
<td>Grant</td>
<td>Wayne</td>
<td>Union</td>
</tr>
<tr>
<td>5</td>
<td>John</td>
<td>Adams</td>
<td>Marshall</td>
</tr>
<tr>
<td>6</td>
<td>Morgan</td>
<td>Lee</td>
<td>Lake</td>
</tr>
<tr>
<td>7</td>
<td>John</td>
<td>Henry</td>
<td>Brown</td>
</tr>
<tr>
<td>8</td>
<td>William</td>
<td>Jacob</td>
<td>Orange</td>
</tr>
<tr>
<td>9</td>
<td>Kelly</td>
<td>Davidson</td>
<td>Taylor</td>
</tr>
<tr>
<td>10</td>
<td>Colleen</td>
<td>Hurst</td>
<td>Randolph</td>
</tr>
<tr>
<td>11</td>
<td>Rhona</td>
<td>Herrod</td>
<td>Cumberland</td>
</tr>
<tr>
<td>12</td>
<td>Jane</td>
<td>Paul</td>
<td>Marshall</td>
</tr>
<tr>
<td>13</td>
<td>Ashton</td>
<td>Fox</td>
<td>Calhoun</td>
</tr>
<tr>
<td>14</td>
<td>Garrett</td>
<td>John</td>
<td>Madison</td>
</tr>
<tr>
<td>15</td>
<td>Fredie</td>
<td>Winters</td>
<td>Washington</td>
</tr>
</tbody>
</table>
</div>
css
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 250px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}