Горизонтальная полоса прокрутки у столбца таблицы HTML CSS JS

Как я могу добавить горизонтальную прокрутку у ячкейки таблицы? получается сделать только вертикальную.

HTML код:

<table>
   <tbody>
      <tr>
         <td>Какой-то текст</td>
         <td>
            <div class="scroll-x">
              *Очень много текста*
            </div>
         </td>
      </tr>
   </tbody>
</table>

CSS код:

.scroll-x {
   overflow-x: scroll;
   white-space: nowrap;
}

Так же представим, что у ячеек таблицы фиксированная ширина
Я использую фиксированную ширину определяя ее в процентах. А с процентами почему-то не работает

td {
  border: 1px solid gray;
  padding: 0.5em;
  
  max-width: 100px;
  white-space: nowrap;
  overflow-x: scroll;
}

<table>
   <tbody>
      <tr>
         <td>Какой-то текст</td>
         <td>*Очень много текста*</td>
      </tr>
      <tr>
         <td>Ещё одна колонка</td>
         <td>*Ещё один очень длинный текст*</td>
      </tr>
   </tbody>
</table>

.scroll-x {
  overflow-x: auto;
  white-space: nowrap;
 }