我需要找到一种方法，以便能够在保留列标题的同时仅滚动表格主体，而且我更希望能够在元素本身的范围内执行此操作，而不是使用完全独立的标题来装配某些东西和身体在后台有一堆 Javascript 绑定
我为您制作了一个示例存储库，以了解如何使其工作（也有隐藏的滚动条）。
可能还有其他方法可以完成同样的事情，但这就是我所做的。
<!-- wrap table in container with class. -->
<b-container fluid class="table-container">
<b-table
:items="items"
:fields="fields"
caption-top
>
</b-table>
</b-container>
这是带有隐藏滚动条的 CSS。
.table-container {
height: calc(100vh - 450px);
}
.table-container table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
.table-container table thead {
flex: 0 0 auto;
width: 100%;
}
.table-container table tbody {
flex: 1 1 auto;
display: block;
width: 100%;
overflow-y: auto;
}
.table-container table tbody tr {
width: 100%;
}
.table-container table thead, .table-container table tbody tr {
display: table;
table-layout: fixed;
}
.table-container table {
border-collapse: collapse;
}
.table-container table td, .table-container table th {
padding: 0.4em;
}
.table-container table th {
border: 1px solid black;
font-size: 0.7vw;
}
.table-container table td {
border: 1px solid #e7e1e1;
font-size: 0.85em;
/* necessary to set for proper "showing row x of y" calculations if infinate scoll */
white-space: nowrap;
text-align: center;
padding: 10px 5px;
white-space: nowrap;
text-overflow: ellipsis;
}
.table-container table thead {
border: 2px solid #0F0FA3;
}
.table-container th {
background-color: #0F0FA3;
color: #b5aba4;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none !important;
-ms-user-select: none;
user-select: none;
}
.table-container table tbody td {
padding: 8px;
cursor: pointer;
}
.table-container table tbody tr:hover {
background-color: rgba(168, 168, 239, .5);
}
.table-container table thead td {
padding: 10px 5px;
}
.table-container tr:nth-child(even) {
background-color: rgba(168, 168, 239, 1);
}
/* START Adjustments for width and scrollbar hidden */
.table-container th.table-action, .table-container td.table-action {
width: 5.8vw;
}
.table-container table thead {
width: calc(100% - 1px);
}
.table-container table tbody::-webkit-scrollbar {
width: 1px;
}
.table-container table tbody::-webkit-scrollbar {
width: 1px;
}
.table-container table tbody::-webkit-scrollbar-thumb {
width: 1px;
}
/* END Adjustments for width and scrollbar */
更新，另一种固定标题但非常受限的方法（ref）：
有几种方法可以做到这一点......并且并不总是保证跨浏览器：
创建一个类，例如 my-table-scroll
table.my-table-scroll,
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot,
table.my-table-scroll > tbody > tr,
table.my-table-scroll > thead > tr {
width: 100%;
display: block
}
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot {
display: block;
width: 100%;
overflow-y: scroll;
}
table.my-table-scroll > thead,
table.my-table-scroll > tfoot {
height: auto;
}
/* these last two rules you will need to tweak on an as needed basis */
table.my-table-scroll > tbody {
/* set max height for tbody before it scrolls */
max-height: 200px;
}
table.my-table-scroll > thead > tr > th,
table.my-table-scroll > thead > tr > td,
table.my-table-scroll > tbody > tr > th,
table.my-table-scroll > tbody > tr > td,
table.my-table-scroll > tfoot > tr > th,
table.my-table-scroll > tfoot > tr > td {
display: inline-block;
/* you need to explicitly specify the width of the table cells */
/* either equal, or specify individual widths based on col index. */
/* Here, we assume you have 4 columns of data */
width: 25%;
}
/*
could use sibling selectors to select specific columns for widths:
td + td (second column)
td + td + td (3rd column, etc)
*/
然后把这个类放到你的 b 表上。