带有可滚动 tbody 的 Bootstrap 响应式表格？

问题描述 投票：0回答：2

我有一个引导表，我在其 tbody 中附加了 db 的内容，但我无法真正仅在 tbody 中获得响应式垂直滚动（具有固定标题），我试图用 css 搞乱并让 tbody 显示：带有溢出的块：自动，它有点工作，但我失去了thead单元宽度的响应能力，它们变得比tbody单元更短。

有一个特定的引导类可以做到这一点吗？

tbody{
max-height: 10vh;
overflow: auto;
}
<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
</tbody>
</table>    
</div>
</body>
</html>

css twitter-bootstrap bootstrap-5 bootstrap-table
2个回答
7
投票

您可以使用 

sticky-top
类，并通过自定义类让 div 容器成为滚动元素。

clamp()
可以帮助您在 
max-height
规则内设置最小高度，以至少看到一行。还添加了白色背景以隐藏后面滚动的内容。

主要使用 BS 类的可能示例。

.tbodyDiv{
max-height: clamp(5em,10vh,250px);
overflow: auto;
}
<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
hello i'm a sticky header
<div class="tbodyDiv">
<table class="table table-bordered table-striped text-center">
<thead class="sticky-top bg-white">
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
</tbody>
</table>    
</div>
</body>
</html>

0
投票

我输入了这段代码并得到了答案。 这实在是太奇怪了，而且不合逻辑。 我在chrome和firefox中检查过，一切都是正确的。

我使用引导5。

table {
    display: block;
    overflow: auto;
}
thead>th, tbody tr, tbody>tr>th>{
    display: table;
    width: fit-content;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
table {
    width: 185px;
}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.