如何使我的表格的前两列和两行具有粘性？答案

【问题标题】：How can I make the first two columns and rows of my table sticky?如何使我的表格的前两列和两行具有粘性？
【发布时间】：2021-11-26 14:58:43
【问题描述】：

我正在创建一个主成绩簿应用程序，但我需要 CSS 格式方面的帮助。我遇到了一个不知道如何解决的问题：

我希望表格的前两行被“冻结”，前两列也被“冻结”。我已经完成了一半的工作，但正如您在下面看到的，第二列在第一列的顶部滑动。这是什么原因造成的？
为什么一年级以下的“X%”（在本例中为 BOTR 问题 11/12）以蓝绿色显示？为什么 CSS 将其检测为 tr th:first-child？

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

   .title {grid-area: title}

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

   table {border-collapse: collapse}

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

   th {
     z-index: 1;
     position: sticky;
     top: 0; left: 0;
     background-color: white;
     overflow: hidden;}

   tr th:first-child {
     z-index: 2;
     position: sticky;
     top: 0;
     background-color: cyan;}

   tr td:first-child, tr td:nth-child(2) {
     z-index: 1;
     position: sticky;
     left: 0;
     white-space: nowrap;
     display: flex;
     justify-content: flex-start;
     max-width: fit-content !important;
     background-color: orange;}

   td input {
     border: none;
     outline: none;
     text-align: center;
     max-width: 80%;
     background-color: pink;
     padding: 0px;}

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

   .assign {
     padding: 6px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;}

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

   .assign .title {
     font-size: 15px;
     overflow: hidden;
     color: #581F98}

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

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

   .red {
     padding: 10px;
     background-color: red;}

   .gray {
     width: 100%; height: 100%;
     background-color: lightgray;}

  .score {
    display: flex;
    justify-content: center;
    align-items: center;}

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

【问题讨论】：

标签： html css html-table css-grid sticky

【解决方案1】：

问题在于您的:first-child 和:nth-child 选择器。
您的选择器是：在每一行中，第一个 th 和 X 是您的第一个 th。

如果您使用的是粘性位置，您必须定义它应该粘贴的位置。我将前两行包裹在 thead 中，因此我不必获取第一个孩子的高度。

在第二列中，我将其定义为向左粘贴 95px，即第一列的宽度。

所以我创建了一个最小的示例：

.outer{
  width: 400px;
  height: 250px;
  overflow: scroll;
  border: 1px solid red;
}
table{
  width: 600px;
  border-collapse: collapse;
}
td,
th{
  border: 1px solid black;
  padding: 10px;
  background: white;
}
thead{
  top: 0;
  position: sticky;
  z-index: 1;
}
tr td:nth-child(1),
tr td:nth-child(2),
tr th:nth-child(1),
tr th:nth-child(2){
  position: sticky;
  left: 0;
}
tr th:nth-child(2),
tr td:nth-child(2){
  left: 95px;
}

<div class="outer">
  <table>
    <thead>
      <tr>
        <th>sticky</th>
        <th>sticky</th>
        <th>sticky</th>
        <th>sticky</th>
        <th>sticky</th>
      </tr>
      <tr>
        <th>sticky</th>
        <th>sticky</th>
        <th>sticky</th>
        <th>sticky</th>
        <th>sticky</th>
      </tr>
    </thead>
    <tr>
      <td>sticky</d>
      <td>sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
    </tr>
  <tr>
      <td>sticky</d>
      <td>sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
    </tr>
<tr>
      <td>sticky</d>
      <td>sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
    </tr>
<tr>
      <td>sticky</d>
      <td>sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
    </tr>
<tr>
      <td>sticky</d>
      <td>sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
    </tr>
<tr>
      <td>sticky</d>
      <td>sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
      <td>non sticky</td>
    </tr>
  </table>
</div>

【讨论】：

"在第二列中，我将其定义为向左粘贴 95px，即第一列的宽度。" - 当我不确定第一列的宽度时我会怎么做？这就是为什么我将第一列的宽度设置为“适合内容”
可以用JS获取宽度，然后动态添加left属性。或者，您可以只使用一列并将内容放在该列内的两个 div 中，而不是使用两列。