CSS flex格式的表格问题

我正在努力创建一个主成绩单应用程序，但我需要CSS格式的帮助。我遇到了太多的问题，我不知道如何解决:

我希望表的前两行是"冻结"的;以及前两列是"冻!"我已经完成了一半，但正如你在下面看到的，第二列在第一列的顶部滑动。是什么导致了这种情况?
我有一些条目不存在于成绩簿中，所以我想用X标记该单元格，并完全用灰色着色。<td><div class='score gray'>X</td>。但是，x上方/下方仍然有很多空白，我将宽度和高度设置为100%，我做错了什么?
我将<div class='assign'>设置为具有flex-direction: column; justify-content: space-between;属性的flex，希望具有"到期日期"。在单元格的顶部，赋值名称在单元格的底部。然而，这不是我想象中的定位。为什么?
为什么是"X%"在一年级的下面(在这个例子中，BOTR问题11/12)涂成蓝绿色?为什么CSS将此检测为tr th:first-child?

任何解决方案将不胜感激，特别是解释，以便我学习。谢谢你! !

body {
margin: 0;
position: absolute;
top: 65px; left: 0px;
width: 100%;
height: calc(100vh - 65px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"title"}
.title {grid-area: title}
.master {
grid-area: modules;
overflow-x: scroll;}
table {border-collapse: collapse}
th, td {
max-width: 110px;
border: 1px solid lightgray;}
th {
z-index: 1;
position: sticky;
top: 0; left: 0;
background-color: white;
overflow: hidden;}
tr th:first-child {
z-index: 2;
position: sticky;
top: 0;
background-color: cyan;}
tr td:first-child, tr td:nth-child(2) {
z-index: 1;
position: sticky;
left: 0;
white-space: nowrap;
display: flex;
justify-content: flex-start;
max-width: fit-content !important;
background-color: orange;}
td input {
border: none;
outline: none;
text-align: center;
max-width: 80%;
background-color: pink;
padding: 0px;}
th select {
outline: none;
-webkit-appearance: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 8px;
width: 100%;
border: 1px solid lightgray}
.assign {
padding: 6px;
display: flex;
flex-direction: column;
justify-content: space-between;}
.assign .due {
font-size: 11px;
color: darkgray;}
.assign .title {
font-size: 15px;
overflow: hidden;
color: #581F98}
.studentInfo {
display: flex;
align-items: center;
padding: 6px 12px 6px 6px;}
.studentInfo img {
width: 25px;
margin-right: 10px;
clip-path: circle();}
.red {
padding: 10px;
background-color: red;}
.gray {
width: 100%; height: 100%;
background-color: lightgray;}
.score {
display: flex;
justify-content: center;
align-items: center;}

<body>
<div class='master'>
<table>
<tr>
<th colspan='2' rowspan='2'>
<select>
<option>Reading</option>
<option>Social Studies</option>
</select>
<select>
<option>Week 1</option>
<option>Week 2</option>
</select>
</th>
<th>
<div class='assign'>
<span class='due'>10/06 to 10/13</span>
<span class='title'>BOTR Questions 11/12</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>10/06 to 10/08</span>
<span class='title'>TS Flipbook: Cause/Effect</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/28 to 10/01</span>
<span class='title'>BOTR Questions 9/10</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/30 to 10/01</span>
<span class='title'>TS: Compare & Contrast</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/21 to 09/27</span>
<span class='title'>BOTR Questions 7/8</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/15 to 09/20</span>
<span class='title'>TS Flipbook: Sequence</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/13 to 09/17</span>
<span class='title'>TS Flipbook: Description</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/07 to 09/13</span>
<span class='title'>Starving Context Clues</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/08 to 09/13</span>
<span class='title'>BOTR Questions 5/6</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/30 to 09/07</span>
<span class='title'>BOTR Questions 3/4</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>09/02 to 09/03</span>
<span class='title'>Profile: John Smith</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/31 to 09/03</span>
<span class='title'>Susan Constant vs England</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/23 to 08/31</span>
<span class='title'>BOTR Questions 1/2</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/23 to 08/27</span>
<span class='title'>Character Traits</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/19 to 08/24</span>
<span class='title'>Buckle Down PreTest</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/17 to 08/23</span>
<span class='title'>Roanoke Cornell Notes</span>
</div>
</th>
<th>
<div class='assign'>
<span class='due'>08/16 to 08/20</span>
<span class='title'>Roanoke Story Map</span>
</div>
</th>
</tr>
<tr>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
<th>X%</th>
</tr>
<tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/teachers/2.jpg'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/teachers/3.jpg'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/teachers/4.jpg'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score gray'>X</td><td><div class='score gray'>X</td><td><div class='score gray'>X</td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/default.png'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>
<td>
<div class='studentInfo'>
<img src='../../resources/pics/teachers/1.jpg'>
<span>John Doe</span>
</div>
</td>
<td>X%</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td><td><div class='score gray'>X</td><td><div class='score gray'>X</td><td><div class='score'><input type='text'></div></td><td><div class='score'><input type='text'></div></td></tr>  </body>

#2:如果你想让单元格完全是灰色的，那么在td上设置background:grey，而不是在子单元格上。子节点上的高度:100%被忽略，因为父节点td具有不确定的高度。(为了明白我的意思，添加高度:60px或其他的td，看到高度:100%现在被尊重。)

旁白:在表部件(table, tbody, tr, th等)上设置display属性是一条通往痛苦的单程票。当您在单元格上设置display:flex时，浏览器不会更改单元格的呈现方式，而是在<td display:flex>周围插入一个匿名表单元格，然后将其视为<div display:flex>。这个浏览器的行为是完全不透明的，你不知道它在做什么。例如

<td style="display: flex">

是

<td><div style="display: flex">

然后考虑是否在元素上添加其他属性，如

<td style="display: flex; border: solid">

边界是否适用于匿名<td>或flexbox?谁知道呢。

我本想把这个回答作为一个评论，但是它太长了。

对于2，

当您将width和height设置为100%时，它们只会在其容器允许的范围内扩展。这意味着如果它们没有到达容器的边缘，那么"X"元素上可能有一个空白，或者它所在的盒子上有一个填充。

.gray{
margin: 0;
}
td{
padding: 0;
}

这是.assign上填充的类似问题。您可以删除.assign上的填充，而是使用文本框本身的边距来创建该空间。这也将允许您更多地控制框的大小。交货。

.assign{
padding: 0;
}
.due{
margin: 2px 6px 6px 6px;
}
.title{
margin: 6px 6px 2px 6px;
}

相关内容

最新更新

热门标签：