表头固定，体可滚动

我试图使一个表与固定标题和一个可滚动的内容使用引导3表。不幸的是，我发现的解决方案不工作与bootstrap或混乱的风格。

这里有一个简单的bootstrap表，但由于某种原因，我不知道tbody的高度不是10px。

height: 10px !important; overflow: scroll;

例子:

当前回答

在我看来，最好的jQuery插件之一是DataTables。

它也有一个扩展的固定头，它是非常容易实现。

摘自网站:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

但是你可以用最简单的方法来创建一个scrollable <tbody>:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

2015-07-26 13:03:02

其他回答

所有六个左右的CSS解决方案都假设一个短表。这些代码应该用几百行的代码进行测试。

2021-10-17 04:52:03

既然“所有”浏览器都支持ES6，我已经将上面的各种建议合并到一个JavaScript类中，该类以表作为参数，并使主体可滚动。它让浏览器的布局引擎确定标题和主体单元格的宽度，然后使列的宽度相互匹配。

可以显式地设置表的高度，或者填充浏览器窗口的剩余部分，并提供事件的回调，如视口调整大小和/或细节元素打开或关闭。

多行标头支持是可用的，如果表使用WCAC指南中指定的id/headers属性作为可访问性，这是特别有效的，这并不像看起来那样是一个繁重的要求。

代码不依赖于任何库，但如果使用它们，则可以很好地使用它们。(在使用JQuery的页面上测试)。

代码和示例用法可以在Github上找到。

2019-10-01 13:46:09

在我看来，最好的jQuery插件之一是DataTables。

它也有一个扩展的固定头，它是非常容易实现。

摘自网站:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

但是你可以用最简单的方法来创建一个scrollable <tbody>:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

2015-07-26 13:03:02

迟到的派对(我的生活的故事)，但由于这是谷歌上的第一个结果，上面没有一个让我工作，下面是我的代码

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

2017-04-23 05:47:34

刚发现一个很酷的解决方案使用网格! 这是我用过的，效果很好:

tbody tr, thead tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}

tbody {
  height: 300px; // or whatever height
  width: 100%;
  overflow-y: auto;
  display: block;
}

演示: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x

2022-07-18 20:44:38

表头固定，体可滚动

推荐文章

最新文章

标签