Как сделать горизонтальный скролл под таблицей

Имеется таблица со скроллом на мобильной версии

Вызвал вот так:

<div><table>
<tbody>
<tr>
<th>№</th>
<th>Наименование</th>
<th>Допускаемая нагрузка, кН</th>
<th>d</th>
<th>s, не менее</th>
<th>Длина развернутой детали</th>
<th>Масса, кг</th>
</tr>
<tr>
<td>1</td>
<td>01 ОСТ 24.125.102</td>
<td>8,8</td>
<td>М12</td>
<td>14</td>
<td>129</td>
<td>0,31</td>
</tr>
<tr>
<td>2</td>
<td>02 ОСТ 24.125.102</td>
<td>14,7</td>
<td>М16</td>
<td>18</td>
<td>160</td>
<td>0,61</td>
</tr>
<tr>
<td>3</td>
<td>03 ОСТ 24.125.102</td>
<td>23,5</td>
<td>М20</td>
<td>23</td>
<td>183</td>
<td>0,96</td>
</tr>
<tr>
<td>4</td>
<td>04 ОСТ 24.125.102</td>
<td>33,3</td>
<td>М24</td>
<td>28</td>
<td>216</td>
<td>1,72</td>
</tr>
<tr>
<td>5</td>
<td>05 ОСТ 24.125.102</td>
<td>53,9</td>
<td>М30</td>
<td>34</td>
<td>268</td>
<td>2,81</td>
</tr>
<tr>
<td>6</td>
<td>06 ОСТ 24.125.102</td>
<td>78,4</td>
<td>М36</td>
<td>38</td>
<td>333</td>
<td>4,79</td>
</tr>
<tr>
<td>7</td>
<td>07 ОСТ 24.125.102</td>
<td>107,9</td>
<td>М42</td>
<td>58</td>
<td>422</td>
<td>12,90</td>
</tr>
<tr>
<td>8</td>
<td>08 ОСТ 24.125.102</td>
<td>147,0</td>
<td>М48</td>
<td>58</td>
<td>422</td>
<td>12,40</td>
</tr>
</tbody>
</table></div>
    

table {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    
}

Подскажите пожалуйста, как можно сделать скролл ПОД таблицей