可滚动的表格主体

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。有什么建议吗？此外，为什么在设置高度无效？

- Mark

Answer 1

您可以通过以下方式使可滚动：

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          */ 
}

演示 | 带类名的演示

注意： 如果您希望以上述示例中提到的方式定位 tbody，那么可以。但更好的做法是为其分配一个可滚动的类并按照以下方式进行操作：

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

基本思路： 基本思路来自 Hashem 在这个主题中的回答。

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

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

- Harry

---

Harry，这在你的演示中可以运行，但当我用我的表格更新它时，它就无法工作了。http://jsfiddle.net/guT8P/5/ - Mark

啊，你拿到的是我在错误的时间更新的示例。对于使用tbody.second的那个示例，你需要将class='second'分配给相应的tbody，如<tbody class='second'>。或者更好的做法是使用语义化且可重用的类名称，如scrollable。 - Harry

我简直不敢相信我做了那件事，哈哈，我以为“.second”是一些新的选择器。唉。 - Mark

发生在我们最好的人身上，伙计。顺便说一下，看看这个SO线程以获取一些替代方案。 - Harry

nth-child 没有正常工作，可能是因为我们都忽略了我们要滚动的 tbody 实际上是表格中的第三个子元素而不是第二个。请参考此示例，并查看第一个子元素没有获得样式，因为它不是一个 p 元素（它是一个 h1）。 - Harry

如果您不使用“a”作为页眉和页脚，则此方法无效：一旦在tbody / thead上设置了display：block，列宽度将不再匹配。 - Mrten

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)

- Nandha