可滚动表体答案

【问题标题】：Scrollable Table Tbody可滚动表体
【发布时间】：2015-02-12 19:43:15
【问题描述】：

我有一张动态生成数据的表格。由于空间限制，我需要能够使 tbody 可滚动。

我的桌子是这样的：

<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>

我尝试过使用css，但没有成功：

table tbody:nth-child(2) {
height:500px;
max-height:500px;
overflow-y: scroll;
}

我理想的解决方案是简单的 css。有什么建议么？另外，为什么在 tbody 上设置高度不起作用？

【问题讨论】：

标签： jquery html css

【解决方案1】：

您可以通过执行以下操作使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          */ 
}

Demo | Demo with Class Name

注意：如果您希望可以像上面示例中提到的那样定位tbody，或者更好的是为其分配一个可滚动的类并执行以下操作：

tbody.scrollable {
    height: 75px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    width: 100px;       /* Just for the demo          */ 
}

基本理念：基本理念取自 Hashem 在this thread 中的回答。

更新：tbody:nth-child(2) 不起作用，因为该选择器将样式应用于第二个子元素，该子元素也是 tbody。在我们的例子中，它有效，但没有任何效果，因为表中的第二个孩子是第一个 tbody（在 thead 之后），它的内容较少，因此不需要滚动条。当我们到达nth-child(3)时，它起作用了，因为第二个tbody实际上是第三个子元素并且有足够的内容超过设置的高度，从而触发了滚动条。

看看这个sample 以供参考。我们可以看到样式不适用于第二个div 中的第一个元素和第一个div 中的第二个元素，因为它们都不是p 标签（即使两个div 的CSS 规则相同） )。

【讨论】：

Harry，这在你的演示中有效，但是当我用我的表格更新它时，这不起作用。 jsfiddle.net/guT8P/5
啊，你举的例子是我更新的时间不对。对于使用tbody.second 的示例，您需要将class='second' 分配给相应的tbody，如<tbody class='second'>。或者更好的语义和可重用类名将是scrollable。
我不敢相信我做到了，哈哈我以为 .second 是一些新的选择器。呵呵
发生在我们最好的朋友身上。顺便说一下，看看this SO thread 的一些替代品。
nth-child 不起作用可能是因为我们俩都忽略了这样一个事实，即我们要滚动的tbody 实际上是表格中的第三个孩子而不是第二个。参考this sample 并看到第一个孩子没有得到样式，因为它不是p 元素（它是h1）。

【解决方案2】：

试试下面的方法简单易实现

下面是jsfiddle链接

http://jsfiddle.net/v2t2k8ke/2/

HTML：

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

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)

【讨论】：