jQuery 可滚动表格Tbody
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24699594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollable Table Tbody
提问by Mark
I have a table with dynamically generated data. Because of space limitation, I need to be able to make the the tbody scrollable.
我有一个动态生成的数据表。由于空间限制，我需要能够使 tbody 可滚动。
My table looks like this:
我的桌子看起来像这样：
<table>
<thead> <! -- This thead needs to stay in a fixed position-->
<tr>
<th></th>
<th></th>
</tr>
<thead>
<tbody> <! -- This tbody needs to stay in a fixed position-->
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tbody> <! -- This tbody needs to scroll -->
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I've tried using css, but have been unsuccessful:
我试过使用 css，但没有成功：
table tbody:nth-child(2) {
height:500px;
max-height:500px;
overflow-y: scroll;
}
My ideal solution is simple css. Any suggestions? Also, why does setting a height on a tbody not work?
我的理想解决方案是简单的 css。有什么建议？另外，为什么在 tbody 上设置高度不起作用？
采纳答案by Harry
You can make the tbodyscrollable by doing the below:
您可以tbody通过执行以下操作使滚动：
tbody {
display: block; /* mandatory because scroll only works on block elements */
}
tbody:nth-child(3) {
height: 75px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
width: 100px; /* Just for the demo */
}
Note:If you wish you can either target the tbodyas mentioned in the above sample or much better would be assigning it a scrollable class and doing as below:
注意：如果您希望可以针对tbody上面示例中提到的目标，或者更好的是为其分配一个可滚动类并执行以下操作：
tbody.scrollable {
height: 75px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
width: 100px; /* Just for the demo */
}
Base Idea:Base Idea is taken from Hashem's answer in this thread.
基本想法：基本想法取自哈希姆在此线程中的回答。
Update:The tbody:nth-child(2)didn't work because that selector applies the style to the 2nd child element which is also a tbody. In our case, it worked but it didn't have any effect because the 2nd child within the table was the first tbody(after the thead) and it had lesser contents which made the scrollbar unnecessary. When we made it to nth-child(3), it worked because the 2nd tbodyis actually the 3rd child element and had enough contents to exceed the set height and thereby triggered the scrollbar to come.
更新：在tbody:nth-child(2)没有工作，因为选择样式应用于这也是第二子元素tbody。在我们的例子中，它工作但没有任何效果，因为表中的第二个孩子是第一个tbody（在 之后thead）并且它的内容较少，这使得滚动条变得不必要。当我们到达 时nth-child(3)，它起作用了，因为第二个tbody实际上是第三个子元素并且有足够的内容超过设置的高度，从而触发滚动条来。
Have a look at this samplefor reference. We can see that the style is not applied for the 1st element in the 2nd divand the 2nd element in the 1st divbecause both of them are not ptags (even though the CSS rule was same for both divs).
看看这个示例以供参考。我们可以看到样式不适用于第二div个元素中的第一个元素和第一个元素中的第二个元素，div因为它们都不是p标签（即使两个 div 的 CSS 规则相同）。
回答by Nandha
Try below approach simple easy to implement
尝试以下方法简单易于实施
below is the jsfiddle link
下面是jsfiddle链接
http://jsfiddle.net/v2t2k8ke/2/
http://jsfiddle.net/v2t2k8ke/2/
HTML:
HTML：
<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>
CSS:
CSS：
#tbl_cnt{
border-collapse: collapse; width: 100%;word-break:break-all;
}
#tbl_cnt thead, #tbl_cnt tbody{
display: block;
}
#tbl_cnt thead tr{
background-color: #8C8787; text-align: center;width:100%;display:block;
}
#tbl_cnt tbody {
height: 100px;overflow-y: auto;overflow-x: hidden;
}
Jquery:
查询：
var data = [
{
"status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
},{ "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
},{
"status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
},{
"status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
}
];
var sth = '';
$.each(data[0], function (key, value) {
sth += '<td>' + key + '</td>';
});
var stb = '';
$.each(data, function (key, value) {
stb += '<tr>';
$.each(value, function (key, value) {
stb += '<td>' + value + '</td>';
});
stb += '</tr>';
});
$('#tbl_cnt thead tr').append(sth);
$('#tbl_cnt tbody').append(stb);
setTimeout(function () {
var col_cnt=0
$.each(data[0], function (key, value) {col_cnt++;});
$('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
$('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width', ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)
