如何利用css实现表体滚动和表头固定
如何利用css实现表体滚动和表头固定
提问于 2018-01-03 12:22:09
我正在尝试使表体可滚动。我试着在我的类中使用overflow属性并给div一些这样的高度，但在我的例子中似乎不起作用。
.tbody-row {
display: table-row;
overflow-y:scroll;
height:100px;
}然而，如果我把我的表代码放在div下面，那么它将使表可以滚动，但同时表头不会固定在它们的位置。
<div style="height:100px;overflow:auto;">
... My table code ...
</div>在我的代码片段下面
#table {
display: table;
width: 100%;
background: #fff;
margin: 0;
box-sizing: border-box;
}
.header-row {
background: #8b8b8b;
color: #fff;
}
.row {
display: table-row;
}
.tbody-row {
display: table-row;
overflow-y:scroll;
height:100px;
}
select:required:invalid {
color: gray;
}
option[value=""][disabled] {
display: none;
}
option {
color: black;
}
.cell {
display: table-cell;
padding: 23px;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.primary {
text-align: left;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}<div id="table">
<div class="header-row row">
<span class="cell">SL. No.</span>
<span class="cell">Application Date</span>
<span class="cell">Customer Name</span>
<span class="cell">Loan Amount</span>
<span class="cell">Loan Status</span>
<span class="cell">Action</span>
</div>
<div class="tbody-row" *ngFor="let item of customerList ; let i= index;">
<input type="radio" name="expand">
<span class="cell" data-label="SL. No.">{{i+1}}</span>
<span class="cell" data-label="Application Date">{{item.date}}</span>
<span class="cell" data-label="Customer Name">
{{item.customerName}}</span>
<span class="cell" data-label="Loan Amount">{{item.loanAmount}}</span>
<span class="cell" data-label="Loan Status">{{item.status}}</span>
<span class="cell" data-label="Action">
<a class="action" href="javascript:void(0)" (click)="openUserDetailsPage()">More Details</a>
</span>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2018-01-03 13:01:48
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<style>
</style>
<body>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
</tr>
<tr>
<td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
</tr>
<tr>
<td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
</tr>
<tr>
<td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
</tr>
<tr>
<td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
</tr>
<tr>
<td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
</tr>
</tbody>
</table>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2018-01-03 15:45:08
尝试对标题和正文部分使用两个单独的表。如果可能，请尝试通过为两个表设置table-layout: fixed来使用固定布局的表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48071117
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号