Блог

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

Как добавить горизонтальную прокрутку при переполнении таблицы?

#html #css

#HTML #css

Вопрос:

Я пытаюсь добавить горизонтальную прокрутку в таблицу, только если таблица переполняется. таблица

 .display {
  width: 100%;
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
} 
 <table class="display">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Date Time</th>
      <th>Details</th>
      <th>Details_1</th>
      <th>Details_2</th>
      <th>Details_3</th>
      <th>Details_4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>53</td>
      <td>Jenny</td>
      <td>2009/10/09</td>
      <td>Developer</td>
      <td>Developer_1</td>
      <td>Developer_2</td>
      <td>Developer_3</td>
      <td>Developer_4</td>
    </tr>
  </tbody>
</table>

но я столкнулся с проблемой. Когда столбцы уменьшаются, горизонтальная прокрутка все еще остается там, и ширина таблицы также уменьшается. Я хочу добавлять прокрутку только при переполнении таблицы.

Комментарии:

1. Оберните таблицу символом a div и задайте ее ширину или максимальную ширину и overflow-x: scroll;

Ответ №1:

Пожалуйста, добавьте другое переполнение как «auto» в ваш css.

 overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

Надеюсь, это сработает для вас.