Question

我有一张动态生成数据的表格。由于空间限制，我需要能够使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上设置高度不起作用？

Answer 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标记（即使CSS两个div的规则相同。）

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

可滚动表格Tbody

2 个答案: