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

Question

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

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;
}

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

Answer 1

Когда контента слишком много у тебя появится горизонтальный скролл

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

Answer 2

Всё вроде работает...

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>

Возможно, вы просто не ограничили ширину ячейки?

Answer 3

table {
  width: 100%;
  table-layout: fixed; /* <========== */
}

td {
  width: 30%;
}

.scroll {
  width: 70%;
  white-space: nowrap;
  overflow: auto;
}

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

БЛОГ НА HUSL

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

Ответы (3 шт):