表头固定，体可滚动

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

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

height: 10px !important; overflow: scroll;

例子:

当前回答

你应该尝试使用"display:block;"到tbody，因为现在它是内联块，为了设置高度，元素应该是"block"

2014-01-16 17:42:25

其他回答

我使用floatThead jQuery插件(https://mkoryak.github.io/floatThead/#intro)

文档说它适用于Bootstrap 3表，我可以说它也适用于Bootstrap 4表，有或没有表响应帮助。

使用插件就像这样简单:

HTML(普通引导表标记)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

插件初始化:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

完整的免责声明: 我没有以任何方式与插件相关联。在尝试了这里和其他地方发布的许多其他解决方案后，我碰巧发现了它。

2019-05-07 18:43:15

你应该尝试使用"display:block;"到tbody，因为现在它是内联块，为了设置高度，元素应该是"block"

2014-01-16 17:42:25

table { display: block; } thead, tbody { display: block; } tbody { position: absolute; height: 150px; overflow-y: scroll; } td, th { min-width: 100px !important; height: 25px !important; overflow:hidden !important; text-overflow: ellipsis !important; max-width: 100px !important; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden"> <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Username</th> <th>Password</th> <th>First Name</th> <th>Last Name</th> <th>Col16</th> <th>Col7</th> <th>Col8</th> <th>Col9</th> <th>Col10</th> <th>Col11</th> <th>Col12</th> <th>Col13</th> <th>Col14</th> <th>Col15</th> <th>Col16</th> <th>Col17</th> <th>Col18</th> </tr> </thead> <tbody> </tbody> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> </table> </div>`enter code here`

2019-06-05 19:37:34

我在让stickytableheaders库工作时遇到了很多麻烦。做了更多的搜索，我发现floatThead是一个积极维护的替代方案，具有最近的更新和更好的文档。

2017-05-07 05:18:17

清洁解决方案(仅适用于CSS)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

2019-01-29 05:15:49

表头固定，体可滚动

推荐文章

最新文章

标签