Just delete `<div>`'s inline style `overflow-x:auto`, both your solutions will work.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* 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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
**For most browsers released after 2017:**
You can use the `position: sticky`. See [https://caniuse.com/#feat=css-sticky][1].
There is no need for a fixed width column.
Run the code snippet below to see how it works.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tscroll {
width: 400px;
overflow-x: scroll;
margin-bottom: 10px;
border: solid black 1px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #ddd;
}
.tscroll td, .tscroll th {
border-bottom: dashed #888 1px;
}
<!-- language: lang-html -->
<html>
<div class="tscroll">
<table>
<thead>
<tr>
<th></th>
<th colspan="5">Heading 1</th>
<th colspan="8">Heading 2</th>
<th colspan="4">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>10:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>11:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>12:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>13:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>14:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>15:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>16:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>17:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
</tbody>
</table>
</div>
<!-- end snippet -->
[1]: https://caniuse.com/#feat=css-sticky
