粘滞表格标题不粘滞。
分配给Table-head标记的背景色可以工作，但“粘滞位置”不能工作。
第2次尝试使用th：nth-child（1）和th：nth-child（n+1）：nth-child（-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>
1条答案
按热度按时间xlpyo6sf1#
只要删除
<div>的内联样式overflow-x:auto，您的两个解决方案都将工作。