CSS表格滚动问题

【问题标题】：CSS table scroll problemsCSS表格滚动问题
【发布时间】：2021-10-10 04:59:24
【问题描述】：

我正在编写数字成绩簿，遇到了各种 CSS 问题，我不知道如何解决。

  1. 当我滚动时，为什么表格边框会从“粘性”行/列中消失？有没有办法防止这种情况发生？
  2. 我在页面上遇到了两个不同的垂直滚动条，这让滚动变得很有趣。是什么导致了这个故障？页面上应该只有 1 个垂直滚动条。
  3. 如何在不知道第一列宽度的情况下使每行中的第二列“粘滞”？有没有 javascript 专业人士愿意编写一些简单的东西来实现这一点？

任何建议将不胜感激！解释也很有用，因此我可以为将来学习。

body {
     margin: 0;
     position: absolute;
     top: 105px; left: 0px;
     width: 100%;
     height: calc(100vh - 65px);
     background-color: #FCFCFC;
     display: grid;
     grid-template-rows: 1fr;
     grid-template-areas:
       "master"}

   .master {
     grid-area: master;
     overflow-x: scroll;}

   table {border-collapse: collapse}

   th, td {
     background-color: white;
     max-width: 110px;
     border: 1px solid lightgray;}

   th {overflow: hidden;}

  thead{
    top: 0;
    position: sticky;
    z-index: 1;}

  tr td:nth-child(1),
  tr th:nth-child(1){
    position: sticky;
    left: 0;}

   thead th.navigator { /* Top left cell with navigation controls */
     padding: 10px;
     z-index: 3;}

   tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
     white-space: nowrap;
     max-width: fit-content !important;}

   td input {
     border: none;
     outline: none;
     text-align: center;
     max-width: 80%;
     font-size: 18px;
     padding: 6px 0px;}

   th select {
     outline: none;
     -webkit-appearance: none;
     padding: 8px 12px;
     box-sizing: border-box;
     border-radius: 8px;
     width: 100%;
     border: 1px solid lightgray}

  tr:focus-within td:not(.gray) {background-color: #E9DCF9}
  tr:focus-within td:not(.gray) input {background-color: #E9DCF9}

  .due {
    font-size: 11px;
    color: darkgray;}

   .assign {padding: 20px}
   .assign span {
     cursor: pointer;
     font-size: 15px;
     overflow: hidden;
     color: #581F98}

   .avg {padding: 10px}

   .studentInfo {
     display: flex;
     align-items: center;
     margin: 6px 12px 6px 6px;}

   .studentInfo img {
     width: 25px;
     margin-right: 10px;
     clip-path: circle();}

   .red {background-color: red;}
   .gray, .gray input {background-color: #F2F2F2;}

  .score {
    display: flex;
    justify-content: center;
    align-items: center;}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../resources/style.css">
    <title>My Gradebook | ClassColonies</title>
  </head>

  <body>
    <div class='master'>
        <table>
          <thead>
            <tr>
              <th class='navigator' colspan='2' rowspan='4'>
                <form method='GET'>
                  <select name='subID' onchange='this.form.submit()'><option value='1' >Reading</option><option value='2' selected>Social Studies</option>
                  </select>
                  <select name='week' onchange='this.form.submit()' disabled>
                    <option value='all'>Entire Quarter</option><option value='9' >Week 9</option><option value='8' >Week 8</option><option value='7' >Week 7</option><option value='6' >Week 6</option><option value='5' >Week 5</option><option value='4' >Week 4</option><option value='3' >Week 3</option><option value='2' >Week 2</option><option value='1' >Week 1</option>
                  </select>
                </form>
              </th>
              <tr>
                <th class='due'><span>10/04 to 10/08</span></th>
                <th class='due'><span>10/06 to 10/08</span></th>
                <th class='due'><span>09/27 to 10/01</span></th>
                <th class='due'><span>10/01 to 10/01</span></th>
                <th class='due'><span>09/23 to 09/27</span></th>
                <th class='due'><span>08/24 to 09/20</span></th>
                <th class='due'><span>09/13 to 09/17</span></th>
                <th class='due'><span>09/15 to 09/17</span></th>
                <th class='due'><span>09/10 to 09/14</span></th>
                <th class='due'><span>08/24 to 09/13</span></th>
                <th class='due'><span>08/30 to 09/03</span></th>
                <th class='due'><span>09/01 to 09/03</span></th>
                <th class='due'><span>08/23 to 08/27</span></th>
                <th class='due'><span>08/18 to 08/23</span></th>
                <th class='due'><span>08/16 to 08/16</span></th></tr>
                <th class='assign'>
                  <span title='Assignment ID: 115' onclick='assignInfo("115");'>Super Short Summary</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 116' onclick='assignInfo("116");'>NEC Social Classes</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 85' onclick='assignInfo("85");'>Jamestown Test</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 87' onclick='assignInfo("87");'>Plimoth Bingo</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 72' onclick='assignInfo("72");'>Plimoth Station Rotation</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 14' onclick='assignInfo("14");'>Jamestown Fort Presentation</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 73' onclick='assignInfo("73");'>Wampanoag Indians</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 74' onclick='assignInfo("74");'>Mayflower Journey</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 32' onclick='assignInfo("32");'>Women of Jamestown</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 13' onclick='assignInfo("13");'>Fort Planning Sheet</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 12' onclick='assignInfo("12");'>Fort Online Research</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 31' onclick='assignInfo("31");'>Tobacco Intro</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 6' onclick='assignInfo("6");'>Roanoke Cloze Passage</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 8' onclick='assignInfo("8");'>Roanoke Notebook</span>
                </th>
                <th class='assign'>
                  <span title='Assignment ID: 76' onclick='assignInfo("76");'>Class Discussion Participation</span>
                </th>
            </tr>
            <tr>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
              <th class='avg gray'>-</th>
            </tr>
          </thead>
          <tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 11'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='11' title='193.5/215'>90%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 13'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='13' title='206/225'>92%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 2'><img src='../../resources/pics/teachers/2.jpg'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='2' title='158/215'>73%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 65'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='65' title='200/225'>89%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 6'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='6' title='179/225'>80%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 14'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='14' title='150/225'>67%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 3'><img src='../../resources/pics/teachers/3.jpg'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='3' title='172/225'>76%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 4'><img src='../../resources/pics/teachers/4.jpg'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='4' title='139/205'>68%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 7'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='7' title='186.5/215'>87%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 5'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='5' title='123/205'>60%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 12'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='12' title='193/215'>90%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 9'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='9' title='195/225'>87%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 10'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='10' title='205.5/225'>91%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 67'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='67' title='200.5/215'>93%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 71'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='71' title='47.5/195'>24%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td class='gray'><div class='score'><input></div></td><td class='gray'><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 66'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='66' title='193/215'>90%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 8'><img src='../../resources/pics/default.png'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='8' title='196/225'>87%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
            <td>
              <div class='studentInfo'>
                <span title='Student ID: 1'><img src='../../resources/pics/teachers/1.jpg'></span>
                <span>John Doe</span>
              </div>
            </td>
            <td class='avg gray'><span data-studentAvg='1' title='89/205'>43%</span></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td><td><div class='score'><input></div></td></tr>
        </table>
      </div>  </body>
  <div id="assignModal" class="modal">
    <form id="assignInfo" action='../plan/assign.int.php' method='POST'></form>
    <input form='assignInfo' type='hidden' name='source' value='gradebook'>
  </div>
</html>

【问题讨论】：

  • 关于#1：见Border style do not work with sticky position element和Table headers position:sticky and border issue。
  • 关于#2：您将top 设置为“105px”，但将height 计算为“100vh - 65px”。两个像素值应该匹配，即要么将顶部更改为“65px”，要么将高度更改为“100vh - 105px”。
  • 关于#3：你想要第二列还是第一列？你有没有尝试过什么？具体出了什么问题？
  • @showdev 谢谢前两个！关于#3，我希望第一列和第二列都是粘性的，因此老师总是能够看到学生的姓名和学科平均水平，同时能够滚动浏览各种作业。我尝试过使用 ``` tr td:nth-child(2)``` 但这需要我知道根据第一列的宽度在哪里设置 left 属性。

标签： css


【解决方案1】： 

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>

**问题是height 引起了问题。我找到了删除滚动条并只保留一个滚动条的解决方案。 **
如果您仍希望使用 calc，请告诉我！

运行 sn-p 你就会明白了

【讨论】：

  • thead 上的 sticky 似乎不再有效。
  • 这可以防止头上的粘性物起作用..知道为什么吗？
【解决方案2】： 

body {
display:flex;
align-items:center;
justify-content:center;
  margin: 0;
  padding: 3rem;
}

table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 0.25rem;
}
tr.main th {
  background: #aaa;
  color: #000;
}
th {
  background: white;
  position: sticky; /* Sticky Property */
  top: 0; 
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<table>
  <thead>
    <tr class="main">
      <th>Name</th>
      <th>Roll No.</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem.</td>
      <td>1</td>
      <td>Vel.</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>2</td>
      <td>Quisquam?</td>
    </tr>
    <tr>
      <td>Voluptates!</td>
      <td>3</td>
      <td>Alias.</td>

    </tr>
    <tr>
      <td>Maiores.</td>
      <td>4</td>
      <td>Accusantium.</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>5</td>
      <td>Officiis.</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>6</td>
      <td>Impedit.</td>
    </tr>
    <tr>
      <td>Expedita.</td>
      <td>7</td>
      <td>Exercitationem!</td>
    </tr>
    <tr>
      <td>Commodi!</td>
      <td>8</td>
      <td>Aspernatur.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>9</td>
      <td>Eveniet!</td>
    </tr>
    <tr>
      <td>Error!</td>
      <td>10</td>
      <td>Quasi!</td>
    </tr>
    <tr>
      <td>Dolores!</td>
      <td>11</td>
      <td>Corrupti!</td>
    </tr>
    <tr>
      <td>Ea.</td>
      <td>12</td>
      <td>Quam?</td>
    </tr>
    <tr>
      <td>Accusantium.</td>
      <td>13</td>
      <td>Sit.</td>
    </tr>
        <tr>
      <td>Accusantium.</td>
      <td>14</td>
      <td>Sit.</td>
    </tr>
        <tr>
      <td>Accusantium.</td>
      <td>15</td>
      <td>Sit.</td>
    </tr>
        <tr>
      <td>Accusantium.</td>
      <td>16</td>
    </tr>
        <tr>
      <td>Accusantium.</td>
      <td>17</td>
      <td>Sit.</td>
    </tr>    <tr>
      <td>Accusantium.</td>
      <td>18</td>
      <td>Sit.</td>
    </tr>    <tr>
      <td>Accusantium.</td>
      <td>19</td>
      <td>Sit.</td>
    </tr>    <tr>
      <td>Accusantium.</td>
      <td>20</td>
      <td>Sit.</td>
    </tr>    <tr>
      <td>Accusantium.</td>
      <td>21</td>
      <td>Sit.</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>22</td>
      <td>Quisquam?</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>23</td>
      <td>Quisquam?</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>24</td>
      <td>Quisquam?</td>
    </tr>

@Mathew 标题现在是粘性的。唯一需要的是position: sticky

【讨论】：

  • 感谢您的建议，但前两列需要粘贴。知道如何做到这一点吗？
  • 列不能有粘性。如果你愿意，会尝试做！
猜你喜欢
  • 1970-01-01
  • 2020-10-15
  • 2023-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-18
  • 2012-08-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode