CSS table scroll problems-CodePudding

I'm working on a digital gradebook and have ran into all sorts of CSS problems I'm not sure how to fix.

When I scroll, why do the table borders disappear from the "sticky" rows/columns? Is there a way to prevent this from happening?
I'm encountering two different vertical scrollbars on the page which is making scrolling acting funny. What is causing this glitch? There should only be 1 vertical scrollbar on the page.
How can I make the 2nd column in each row "sticky" without knowing the width of the 1st column? Any javascript pros that would be willing to write something simple to accomplish this?

Any advice would be greatly appreciated!! Explanations are also useful so I can learn for the future.

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>

CodePudding user response：

body {
     margin: 0;
     position: absolute;
     top: 105px; left: 0px;
     width: 100%;
     height: 935px;
     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>

**The thing is that the height caused a problem. I have found out a solution for removing the scroll bar and just keeping one scroll bar. **
If you still want the calc to be used let me know !

Run the snippet and you would understand

CodePudding user response：

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 The Header is now sticky. Only thing required was position: sticky