CSS table scroll problems

Question

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>

Regarding #1: see [Border style do not work with sticky position element](https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element) and [Table headers position:sticky and border issue](https://stackoverflow.com/questions/57166162/table-headers-positionsticky-and-border-issue/57170489). — showdev, Oct 10 '21 at 05:53
Regarding #2: you set `top` to "105px", but calculate `height` as "100vh - 65px". The two pixel values should match, i.e. either change top to "65px" or change height to "100vh - 105px". — showdev, Oct 10 '21 at 06:09
Regarding #3: do you want the second column sticky or the first one? Have you tried anything yet? What specifically goes wrong? — showdev, Oct 10 '21 at 06:09
@showdev Thank you for the first two! Regarding #3, I want both the first column and the second column to be sticky, so the teacher is always able to see the student's name and subject average while being able to scroll through the various assignments. I have tried playing around with ``` tr td:nth-child(2)``` but this requires me to know where to set the ```left``` property based on the width of the first column. — Mathew, Oct 10 '21 at 06:29

score 0 · Answer 1 · answered Oct 10 '21 at 05:11

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

This prevents the sticky on the thead from working.. any idea why? — Mathew, Oct 10 '21 at 06:25

score 0 · Answer 2 · answered Oct 10 '21 at 07:59

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

Thank you for the advice, but the first two columns need to be sticky. Any idea how to make this happen? — Mathew, Oct 10 '21 at 14:46

CSS table scroll problems

2 Answers2