可滚动的tbody问题
：）
我知道这个问题已经被问了很多，但我尝试了很多解决方案而且无法让它正常工作。
我需要使用固定标题滚动我的表格。
启动我的表是动态构建的，非常大。 19列，约800行。
首先我使用了jquery datatables插件。 表格在容器中后：
var tbl = createFilter('readDataTbl', '', condition);
$('#tableDiv').empty().append(tbl);
$('#readDataTbl').dataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
});
但是在x中创建了一个滚动，标题被冻结了：
然后我尝试了如下css解决方案：
<style>
table {
border-collapse: collapse;
width: 100%;
}
thead {
text-align:left;
display: table;
float: left;
width: 100%;
}
thead tr {
display: table-row;
width: 100%;
}
tbody {
display: block;
height: 120px;
overflow: auto;
float: left;
width: 100%;
}
tbody tr {
display: table;
width: 100%;
}
tbody tr {
height: 18px;
}
tbody td {
padding:1px 8px;
}
th, td {
width: 25%;
}
tr:after{ /* IE8 fix */
content: ".";
margin-left: -3px; /* to hide the content above tr */ /* not necessary if you are ok with 1px gap */
visibility: hidden;
}
</style>
但是，这只会在这样的人身上造成混乱：
然后我尝试了Here的方法 调整THs宽度后： 的CSS：
<style>
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
</style>
JS：
var tbl = createFilter('readDataTbl', '', condition);
$('#tableDiv').empty().append(tbl);
var $table = $('table');
var $bodyCells = $table.find('tbody tr:first').children();
// Get the tbody columns width array
var colWidth = $bodyCells.map(function () {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
然后我注意到TH长篇文章让它们变得更大：
什么可以帮助我实现目标？ 考虑在TH中插入div但不确定它..
谢谢！ ：]
3 个答案:
答案 0 :(得分：0)
您可以在弹性框布局的帮助下完成此操作。但它肯定不适用于野生动物园。所有其他主流浏览器都完美呈现。
/ * CSS * /
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.table {
height: 100%;
width: 100%;
}
.table .tr {
display: flex;
flex-flow: row wrap;
}
.table .tr .td, .table .tr .th {
flex: 1;
}
.table .thead {
padding-right: 17px;
/* this padding accounts for the width of the scroll bar
* you could compute the default scrollbar width for any browser and set this padding accordingly
* else the headers and records will be misaligned by that margin. */
}
.table .viewport {
height: 640px;
overflow: scroll;
}
/ * HTML * /
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ftable.css" />
<title>Flex tables</title>
</head>
<body>
<div class="table">
<div class="thead">
<div class="tr">
<div class="th">Column 1</div>
<div class="th">Column 2</div>
<div class="th">Column 3</div>
<div class="th">Column 4</div>
<div class="th">Column 5</div>
</div>
</div>
<div class="viewport tbody">
<div class="canvas">
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
如果没有一些JavaScript，你不能完美地做到这一点。实现此目的的最佳方法是使用标头的克隆，将其添加到元素，在其上应用固定位置并隐藏原始元素。希望这可以帮助。您可能还需要将每个列宽绑定到原始宽度。
答案 2 :(得分：0)
我认为您可以使用bootstrap css和一些表格样式。您可以调整 th 高度和宽度以获得更好的效果。此外，您必须计算tbody td, thead th {的百分比宽度，即如果您有19列，那么100/19，即大约5％。因此，您的列宽将非常小，您需要增加thead th {
table {
width: 100%;
}
thead,
tbody,
tr,
td,
th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 50px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td,
thead th {
width: 19.2%;
float: left;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Make fg jfdg jfgj fgjfg jfgj fgj fgj g jfgj fgj dfgj fgjfg</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Fordfghdfg jfdgjfdgj fgj fdgj fgjfgj df</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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？