css - CSS表格滚动问题
问题描述
我正在写一本数字成绩册，遇到了各种各样的 CSS 问题，我不知道如何解决。
- 当我滚动时，为什么表格边框会从“粘性”行/列中消失？有没有办法防止这种情况发生？
- 我在页面上遇到两个不同的垂直滚动条，这使滚动变得有趣。是什么导致了这个故障？页面上应该只有 1 个垂直滚动条。
- 如何在不知道第一列宽度的情况下使每行中的第二列“粘性”？任何愿意编写一些简单的东西来完成此任务的 javascript 专业人士？
任何建议将不胜感激！！解释也很有用，因此我可以为将来学习。
body {
margin: 0;
position: absolute;
top: 105px; left: 0px;
width: 100%;
height: calc(100vh - 65px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"master"}
.master {
grid-area: master;
overflow-x: scroll;}
table {border-collapse: collapse}
th, td {
background-color: white;
max-width: 110px;
border: 1px solid lightgray;}
th {overflow: hidden;}
thead{
top: 0;
position: sticky;
z-index: 1;}
tr td:nth-child(1),
tr th:nth-child(1){
position: sticky;
left: 0;}
thead th.navigator { /* Top left cell with navigation controls */
padding: 10px;
z-index: 3;}
tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
white-space: nowrap;
max-width: fit-content !important;}
td input {
border: none;
outline: none;
text-align: center;
max-width: 80%;
font-size: 18px;
padding: 6px 0px;}
th select {
outline: none;
-webkit-appearance: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 8px;
width: 100%;
border: 1px solid lightgray}
tr:focus-within td:not(.gray) {background-color: #E9DCF9}
tr:focus-within td:not(.gray) input {background-color: #E9DCF9}
.due {
font-size: 11px;
color: darkgray;}
.assign {padding: 20px}
.assign span {
cursor: pointer;
font-size: 15px;
overflow: hidden;
color: #581F98}
.avg {padding: 10px}
.studentInfo {
display: flex;
align-items: center;
margin: 6px 12px 6px 6px;}
.studentInfo img {
width: 25px;
margin-right: 10px;
clip-path: circle();}
.red {background-color: red;}
.gray, .gray input {background-color: #F2F2F2;}
.score {
display: flex;
justify-content: center;
align-items: center;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../resources/style.css">
<title>My Gradebook | ClassColonies</title>
</head>
<body>
<div class='master'>
<table>
<thead>
<tr>
<th class='navigator' colspan='2' rowspan='4'>
<form method='GET'>
<select name='subID' onchange='this.form.submit()'><option value='1' >Reading</option><option value='2' selected>Social Studies</option>
</select>
<select name='week' onchange='this.form.submit()' disabled>
<option value='all'>Entire Quarter</option><option value='9' >Week 9</option><option value='8' >Week 8</option><option value='7' >Week 7</option><option value='6' >Week 6</option><option value='5' >Week 5</option><option value='4' >Week 4</option><option value='3' >Week 3</option><option value='2' >Week 2</option><option value='1' >Week 1</option>
</select>
</form>
</th>
<tr>
<th class='due'><span>10/04 to 10/08</span></th>
<th class='due'><span>10/06 to 10/08</span></th>
<th class='due'><span>09/27 to 10/01</span></th>
<th class='due'><span>10/01 to 10/01</span></th>
<th class='due'><span>09/23 to 09/27</span></th>
<th class='due'><span>08/24 to 09/20</span></th>
<th class='due'><span>09/13 to 09/17</span></th>
<th class='due'><span>09/15 to 09/17</span></th>
<th class='due'><span>09/10 to 09/14</span></th>
<th class='due'><span>08/24 to 09/13</span></th>
<th class='due'><span>08/30 to 09/03</span></th>
<th class='due'><span>09/01 to 09/03</span></th>
<th class='due'><span>08/23 to 08/27</span></th>
<th class='due'><span>08/18 to 08/23</span></th>
<th class='due'><span>08/16 to 08/16</span></th></tr>
<th class='assign'>
<span title='Assignment ID: 115' onclick='assignInfo("115");'>Super Short Summary</span>
</th>
<th class='assign'>
<span title='Assignment ID: 116' onclick='assignInfo("116");'>NEC Social Classes</span>
</th>
<th class='assign'>
<span title='Assignment ID: 85' onclick='assignInfo("85");'>Jamestown Test</span>
</th>
<th class='assign'>
<span title='Assignment ID: 87' onclick='assignInfo("87");'>Plimoth Bingo</span>
</th>
<th class='assign'>
<span title='Assignment ID: 72' onclick='assignInfo("72");'>Plimoth Station Rotation</span>
</th>
<th class='assign'>
<span title='Assignment ID: 14' onclick='assignInfo("14");'>Jamestown Fort Presentation</span>
</th>
<th class='assign'>
<span title='Assignment ID: 73' onclick='assignInfo("73");'>Wampanoag Indians</span>
</th>
<th class='assign'>
<span title='Assignment ID: 74' onclick='assignInfo("74");'>Mayflower Journey</span>
</th>
<th class='assign'>
<span title='Assignment ID: 32' onclick='assignInfo("32");'>Women of Jamestown</span>
</th>
<th class='assign'>
<span title='Assignment ID: 13' onclick='assignInfo("13");'>Fort Planning Sheet</span>
</th>
<th class='assign'>
<span title='Assignment ID: 12' onclick='assignInfo("12");'>Fort Online Research</span>
</th>
<th class='assign'>
<span title='Assignment ID: 31' onclick='assignInfo("31");'>Tobacco Intro</span>
</th>
<th class='assign'>
<span title='Assignment ID: 6' onclick='assignInfo("6");'>Roanoke Cloze Passage</span>
</th>
<th class='assign'>
<span title='Assignment ID: 8' onclick='assignInfo("8");'>Roanoke Notebook</span>
</th>
<th class='assign'>
<span title='Assignment ID: 76' onclick='assignInfo("76");'>Class Discussion Participation</span>
</th>
</tr>
<tr>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
<th class='avg gray'>-</th>
</tr>
</thead>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 11'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='11' title='193.5/215'>90%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 13'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='13' title='206/225'>92%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 2'><img src='../../resources/pics/teachers/2.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='2' title='158/215'>73%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 65'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='65' title='200/225'>89%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 6'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='6' title='179/225'>80%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 14'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='14' title='150/225'>67%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 3'><img src='../../resources/pics/teachers/3.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='3' title='172/225'>76%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 4'><img src='../../resources/pics/teachers/4.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='4' title='139/205'>68%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 7'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='7' title='186.5/215'>87%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 5'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='5' title='123/205'>60%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 12'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='12' title='193/215'>90%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 9'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='9' title='195/225'>87%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 10'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='10' title='205.5/225'>91%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 67'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='67' title='200.5/215'>93%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 71'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='71' title='47.5/195'>24%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td class='gray'><div class='score'><input></div></td><td class='gray'><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 66'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='66' title='193/215'>90%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 8'><img src='../../resources/pics/default.png'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='8' title='196/225'>87%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 1'><img src='../../resources/pics/teachers/1.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'><span data-studentAvg='1' title='89/205'>43%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
</table>
</div> </body>
<div id="assignModal" class="modal">
<form id="assignInfo" action='../plan/assign.int.php' method='POST'></form>
<input form='assignInfo' type='hidden' name='source' value='gradebook'>
</div>
</html>解决方案
body {
display:flex;
align-items:center;
justify-content:center;
margin: 0;
padding: 3rem;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr.main th {
background: #aaa;
color: #000;
}
th {
background: white;
position: sticky; /* Sticky Property */
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}<table>
<thead>
<tr class="main">
<th>Name</th>
<th>Roll No.</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>1</td>
<td>Vel.</td>
</tr>
<tr>
<td>Quas!</td>
<td>2</td>
<td>Quisquam?</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>3</td>
<td>Alias.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>4</td>
<td>Accusantium.</td>
</tr>
<tr>
<td>Hic.</td>
<td>5</td>
<td>Officiis.</td>
</tr>
<tr>
<td>Soluta.</td>
<td>6</td>
<td>Impedit.</td>
</tr>
<tr>
<td>Expedita.</td>
<td>7</td>
<td>Exercitationem!</td>
</tr>
<tr>
<td>Commodi!</td>
<td>8</td>
<td>Aspernatur.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>9</td>
<td>Eveniet!</td>
</tr>
<tr>
<td>Error!</td>
<td>10</td>
<td>Quasi!</td>
</tr>
<tr>
<td>Dolores!</td>
<td>11</td>
<td>Corrupti!</td>
</tr>
<tr>
<td>Ea.</td>
<td>12</td>
<td>Quam?</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>13</td>
<td>Sit.</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>14</td>
<td>Sit.</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>15</td>
<td>Sit.</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>16</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>17</td>
<td>Sit.</td>
</tr> <tr>
<td>Accusantium.</td>
<td>18</td>
<td>Sit.</td>
</tr> <tr>
<td>Accusantium.</td>
<td>19</td>
<td>Sit.</td>
</tr> <tr>
<td>Accusantium.</td>
<td>20</td>
<td>Sit.</td>
</tr> <tr>
<td>Accusantium.</td>
<td>21</td>
<td>Sit.</td>
</tr>
<tr>
<td>Quas!</td>
<td>22</td>
<td>Quisquam?</td>
</tr>
<tr>
<td>Quas!</td>
<td>23</td>
<td>Quisquam?</td>
</tr>
<tr>
<td>Quas!</td>
<td>24</td>
<td>Quisquam?</td>
</tr>
@Mathew 标题现在很粘。唯一需要的是position: sticky
推荐阅读
- c - 将#define 创建的宏传递给函数/数组
- azure - 在 Azure 中创建 VM 时，虚拟网络可以位于不同的资源组中吗
- javascript - 使 javascript 方法在所有情况下都有效（在 ajax 调用之前和之后）
- javascript - 使用 giphy API 获取数据到空数组并显示搜索结果
- ios - Swift3 在 collectionView 中添加一个按钮 Select / View
- android - 如何使用代码在多个活动中处理自定义工具栏中的按钮的“onClick”
- php - 获取 ACF 中页面的 ID
- javascript - 正则表达式 - 名称中只允许一个空格和一个连字符
- php - 谷歌分析 api - 不完整的报告批次
- angular - rxjs websocket：没有返回ping