英文:
How to make table head position sticky at the top?
问题
我有一个可以滚动的表格，我在 https://mdbootstrap.com/docs/b4/jquery/tables/scroll/ 上使用了"静态表格垂直滚动"的示例代码，它运行正常，但我希望表头保持在顶部，或者是否有办法只在主体部分滚动而不是整个表格。
<div class="table-wrapper-scroll-y my-custom-scrollbar" style="max-height: 444px;">
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">公司名称</th>
<th scope="col">用户名</th>
<th scope="col">邮箱</th>
<th scope="col">地址</th>
</tr>
</thead>
<tbody>
@foreach($clients as $client)
<tr>
<td>{{ $client->id }}</td>
<td>{{ $client->company_name }}</td>
<td>{{ $client->user->username }}</td>
<td>{{ $client->user->email }}</td>
<td>{{ $client->user->address }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
.my-custom-scrollbar {
position: relative;
max-height: 400px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
我尝试了以下代码但没有成功：
.table-wrapper-scroll-y thead th {
position: sticky;
top: 0;
z-index: 1;
}
英文:
I have a scrollable table, I used "Static table vertical scroll" example code on https://mdbootstrap.com/docs/b4/jquery/tables/scroll/, it's working fine but I want the header to stay sticked to the top, or if there is any way to make the scroll only on the body not the whole table
<div class="table-wrapper-scroll-y my-custom-scrollbar" style="max-height: 444px;">
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Company Name</th>
<th scope="col">Username</th>
<th scope="col">Email</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
@foreach($clients as $client)
<tr>
<td>{{ $client->id }}</td>
<td>{{ $client->company_name }}</td>
<td>{{ $client->user->username }}</td>
<td>{{ $client->user->email }}</td>
<td>{{ $client->user->address }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
.my-custom-scrollbar {
position: relative;
max-height: 400px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
I tried this with no success
.table-wrapper-scroll-y thead th {
position: sticky;
top: 0;
z-index: 1;
}
答案1
得分: 1
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.table-wrapper-scroll-y thead th {
position: sticky;
top: 0;
z-index: 1;
background: #fff;
}
th, td {
padding: 10px;
}
<!-- language: lang-html -->
<div class="table-wrapper-scroll-y my-custom-scrollbar" style="max-height: 444px;">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Company Name</th>
<th>Username</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
<!-- end snippet -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.table-wrapper-scroll-y thead th {
position: sticky;
top: 0;
z-index: 1;
background: #fff;
}
th, td {
padding: 10px;
}
<!-- language: lang-html -->
<div class="table-wrapper-scroll-y my-custom-scrollbar" style="max-height: 444px;">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Company Name</th>
<th>Username</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
<tr>
<td>1</td>
<td>test</td>
<td>jems</td>
<td>test@gmail.com</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
<!-- end snippet -->
答案2
得分: 0
如果你想要一个粘性头部，请将位置设置为sticky。这将在滚动时帮助实现固定的页眉。
<style>
th {
position: sticky;
top: 0;
background: white;
}
</style>
英文:
If you want a sticky header then set the position to sticky. This will help to have a fixed header on scroll.
<style>
th{
position: sticky;
top: 0;
background: white;
}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论