CSS flex formatted table problems-CodePudding

I am working to create a master gradebook application but I am needing help with CSS formatting. I have ran into a plethora of problems that I am not sure how to fix:

I want the first two rows of the table to be "frozen" as well as the first two columns to be "frozen." I have this halfway working, but as you can see below, the second column slides on top of the first column. What is causing this?
I have some entries that do not exist in the gradebook, so I want that cell to be marked with an X and COMPLETELY colored in gray. <td><div class='score gray'>X</td>. However, there is still a lot of white space above/below the X. I have set width and height to 100%, what am I doing wrong?
I have <div class='assign'> set as a flex with the properties flex-direction: column; justify-content: space-between; in hopes of having the "due date" at the top of the cell and the assignment name at the bottom of the cell. However, this is not positioning as I imagined. Why?
Why is the "X%" under the first grade (in this case, BOTR Questions 11/12) colored in as teal? Why is CSS detecting this as tr th:first-child ?

Any solutions would be greatly appreciated, especially with explanations so I can learn. Thank you!!

   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>

CodePudding user response：

For 2,

when you set width and height to 100%, they will only extend as far as their container allows them to. This means that if they are not reaching the edges of the container, there is likely a margin on the ‘X’ elements, or padding on the box it sits within.

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

For 3,

this is a similar problem with the padding on .assign . You could remove the padding on .assign and instead, use a margin on the text boxes themselves to create that space. This will also allow you more control over how large the boxes are. ex.

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

CodePudding user response：

#2: If you want the cell to be completely grey, then put background:grey on the td, not on the child. The height:100% on the child is ignored because the parent td has an indefinite height. (To see what I mean, add height:60px or something to the td and see that the height:100% is now honored.)

Aside: setting the display property on table parts (table, tbody, tr, th, etc) is a one-way ticket to pain. When you set display:flex on a cell, the browser does not change how the cell renders, it instead inserts an anonymous table cell around the <td display:flex>, which it then treats as <div display:flex>. This browser behavior is totally opaque, you have no insight into what it's doing. E.g.

<td style="display: flex">

becomes

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

Then consider if you put another property on the element, like

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

Does the border apply to the anonymous <td> or to the flexbox? Who knows.

I intended this answer to be a comment but it got too long.