粘性表頭不粘。

分配給Table-thead標簽的背景顏色有效，但是& quot粘性位置& quot不會。

第2次嘗試與第n個孩子(1)和。th:第n個孩子(n+1):第n個孩子(-n + 9)都不

嘗試:

"overflow-x:auto" is required to create horizontal scrollbar when the table overflows in the x-direction  

   /* try_1 */
    table thead tr:nth-child(1) th{
    background: green; position: sticky; top: 0; z-index: 10;
  }
  /* try_2 */
  table thead tr > th:nth-child(n+1):nth-child(-n + 9)  {
       position: sticky;top:0;background-color:red; z-index: 10;}

代碼:(為了簡潔起見，表保持簡短。請再添加幾行來測試代碼。)

/* try_1 */
        /* table thead tr:nth-child(1) th{
        background: green; position: sticky; top: 0; z-index: 10;
      } */
      /* try_2 */
      table thead tr > th:nth-child(n+1):nth-child(-n + 9)  {
           position: sticky;top:0;background-color:red; z-index: 10;}

<div style="overflow-x:auto;">
    
        <table border="1" class="dataframe">
      <thead>
        <tr style="text-align: right;">
          <th></th>
          <th>UpdateTime</th>
          <th>StrikePrice</th>
          <th>CallLtp</th>
          <th>CallOi</th>
          <th>PutLtp</th>
          <th>PutOi</th>
          <th>OiTrend</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>0</th>
          <td>14.24</td>
          <td>18050</td>
          <td>0.57</td>
          <td>0.0</td>
          <td>0.0</td>
          <td>-0.58</td>
          <td></td>
        </tr>
        <tr>
          <th>1</th>
          <td>14.25</td>
          <td>18050</td>
          <td>0.57</td>
          <td>0.0</td>
          <td>0.0</td>
          <td>-0.58</td>
          <td></td>
        </tr>
        <tr>
          <th>2</th>
          <td>14.33</td>
          <td>18050</td>
          <td>-2.44</td>
          <td>0.12</td>
          <td>0.0</td>
          <td>0.43</td>
          <td></td>
        </tr>
        <tr>
          <th>3</th>
          <td>14.31</td>
          <td>18600</td>
          <td>-2.17</td>
          <td>-0.18</td>
          <td>0.92</td>
          <td>-1.4</td>
          <td></td>
        </tr>
        <tr>
          <th>4</th>
          <td>14.31</td>
          <td>18600</td>
          <td>-2.17</td>
          <td>-0.18</td>
          <td>0.92</td>
          <td>-1.4</td>
          <td></td>
        </tr>
        <tr>
          <th>5</th>
          <td>14.31</td>
          <td>18600</td>
          <td>-2.17</td>
          <td>-0.18</td>
          <td>0.92</td>
          <td>-1.4</td>
          <td></td>
        </tr>
      </tbody>
    </table>
        
    </div>

直接刪除& ltdiv & gt的內聯風格溢出-x:auto，您的兩個解決方案都將工作。

/* try_1 */


/* table thead tr:nth-child(1) th{
        background: green; position: sticky; top: 0; z-index: 10;
      } */


/* try_2 */

table thead tr>th:nth-child(n+1):nth-child(-n + 9) {
  position: sticky;
  top: 0;
  background-color: red;
  z-index: 10;
}

<div>
  <table border="1" class="dataframe">
    <thead>
      <tr style="text-align: right;">
        <th></th>
        <th>UpdateTime</th>
        <th>StrikePrice</th>
        <th>CallLtp</th>
        <th>CallOi</th>
        <th>PutLtp</th>
        <th>PutOi</th>
        <th>OiTrend</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>0</th>
        <td>14.24</td>
        <td>18050</td>
        <td>0.57</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>-0.58</td>
        <td></td>
      </tr>
      <tr>
        <th>1</th>
        <td>14.25</td>
        <td>18050</td>
        <td>0.57</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>-0.58</td>
        <td></td>
      </tr>
      <tr>
        <th>2</th>
        <td>14.33</td>
        <td>18050</td>
        <td>-2.44</td>
        <td>0.12</td>
        <td>0.0</td>
        <td>0.43</td>
        <td></td>
      </tr>
      <tr>
        <th>3</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>4</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>5</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>0</th>
        <td>14.24</td>
        <td>18050</td>
        <td>0.57</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>-0.58</td>
        <td></td>
      </tr>
      <tr>
        <th>1</th>
        <td>14.25</td>
        <td>18050</td>
        <td>0.57</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>-0.58</td>
        <td></td>
      </tr>
      <tr>
        <th>2</th>
        <td>14.33</td>
        <td>18050</td>
        <td>-2.44</td>
        <td>0.12</td>
        <td>0.0</td>
        <td>0.43</td>
        <td></td>
      </tr>
      <tr>
        <th>3</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>4</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>5</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>0</th>
        <td>14.24</td>
        <td>18050</td>
        <td>0.57</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>-0.58</td>
        <td></td>
      </tr>
      <tr>
        <th>1</th>
        <td>14.25</td>
        <td>18050</td>
        <td>0.57</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>-0.58</td>
        <td></td>
      </tr>
      <tr>
        <th>2</th>
        <td>14.33</td>
        <td>18050</td>
        <td>-2.44</td>
        <td>0.12</td>
        <td>0.0</td>
        <td>0.43</td>
        <td></td>
      </tr>
      <tr>
        <th>3</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>4</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
      <tr>
        <th>5</th>
        <td>14.31</td>
        <td>18600</td>
        <td>-2.17</td>
        <td>-0.18</td>
        <td>0.92</td>
        <td>-1.4</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>