我想在HTML 5中为表创建滚动条，以便固定标题。
我已经为表格创建了滚动条，但是当我向下滚动时标题会移动。我已经尝试在CSS中使用block：fixed命令，但是它弄乱了整个表结构。
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
/*box-shadow: inset 0 0 5px grey; */
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #bbbbbb;
border-radius: 10px;
}
#base {
position:absolute;
z-index:0;
}
#tbl {
margin: auto;
margin-left: -30px;
top: 450px;
width: 375px;
height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 20px;
white-space: nowrap;
display:block;
overflow:auto;
overflow-x: hidden;
width: 100%;
}
#heading {
font-size: 20px;
}
#scrollbody {
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 13px;
}
tr:nth-child(odd) {background-color: #f2f2f2;}<table id = 'tbl' cellspacing="40">
<thead id = 'heading'>
<tr>
<td colspan = "5" style="padding-right: 350px;">Applicant ▼</td>
<td style="padding-right: 100px;">State</td>
<td colspan = "2" style="padding-right: 100px;">EIN</td>
<td colspan = "2" style="padding-right: 100px;">DUNS</td>
<td colspan = "2" style="padding-right: 100px;">Grant Type</td>
<td style="padding-right: 80px;">Status</td>
</tr>
</thead>
<div id = 'scrollbody'>
<tbody>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
Fairfax Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
<tr>
<td colspan = "5">
City of Charlottesville Public Schools
</td>
<td>
Virginia
</td>
<td colspan = "2">
33-1234888
</td>
<td colspan = "2">
88-111-8235
</td>
<td colspan = "2">
Discretionary
</td>
<td>
Active
</td>
</tr>
</tbody>
</div>
</table>
预期结果是，当我滚动标题时，标题保持在原处，但是现在，标题随表格的其余部分一起滚动。
答案 0 :(得分：0)
这将解决您的问题
.table-responsive{
height:400px;
overflow:scroll;
}
thead tr:nth-child(1) th{
background: white;
position: sticky;
top: 0;
z-index: 10;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover" id="job-table">
<thead>
<tr class="text-center">
<th scope="col">Applicant ▼</th>
<th scope="col">State</th>
<th scope="col">EIN</th>
<th scope="col">DUNS</th>
<th scope="col">Grant Type</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody class="text-center tableBody">
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
<tr>
<td>City of Charlottesville Public Schools</td>
<td>Virginia</td>
<td>33-1234888</td>
<td>88-111-8235</td>
<td>Discretionary</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>