Стол с горизонтальной полосой прокрутки

Question

Я хотел бы иметь таблицу на своем веб-сайте. Проблема в том, что эта таблица слишком широкая (потому что в базе данных много записей). Как добавить горизонтальную полосу прокрутки? Теперь мой стол только отзывчивый и текст делает таким образом

Это мой HTML код:

<table class="hoverable bordered"> 
    <thead> 
     <tr> 
      <th>Row1</th> 
      <th>Row2</th> 
      <th>Row3</th> 
      <th>Row4</th> 
      <th>Row5</th> 
      <th>Row6</th> 
      <th>Row7</th> 
      <th>Row83</th> 
      <th>Row9</th> 
      <th>Row10</th> 
      <th>Row11</th> 
     </tr> 
    </thead> 
    </table> 

Answer 1

Вы должны определить ширину и перелив property.Set ширина> = 100% и переполнение-х: автоматический;

Answer 2

Вам нужно будет добавить следующий код CSS в голову тег

table { 
    overflow-x: scroll !important; 
    display: table; 
    width:  100%; 
    height:  100vh; /* Optional */ 
} 

Если это не работает, попробуйте поместить таблицу внутри DIV и установить перепускной-х для DIV и оставить дисплей : таблица для таблицы.