it-roy-ru.com

Добавить горизонтальную полосу прокрутки в таблицу HTML

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

90
Tsundoku

Вы пробовали свойство CSS overflow?

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

ОБНОВЛЕНИЕ
Как указывают другие пользователи, этого недостаточно , чтобы добавить полосы прокрутки.
Поэтому, пожалуйста, смотрите и оставляйте комментарии и ответы ниже.

58
pasine

Сначала создайте display: block из вашей таблицы

затем установите overflow-x: в auto.

table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

Красиво и чисто. Нет лишнего форматирования.

Вот более сложные примеры с заголовками прокрутки таблицы со страницы моего сайта.

143
Serge Stroobandt

Оберните таблицу в DIV, установите в следующем стиле:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}
35
Colin M

Для этого используйте атрибут CSS " overflow ".

Краткое содержание:

overflow: visible|hidden|scroll|auto|initial|inherit;

например.

table {
    display: block;
    overflow: scroll;
}
16
Roger Willcocks

Я столкнулся с той же проблемой. Я обнаружил следующее решение, которое было протестировано только в Chrome v31:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}
7
Josh

Я не мог заставить работать ни одно из перечисленных выше решений. Однако я нашел взлом:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}
<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

5
mpen

Это улучшение Сержа Stroobandt's ответ и работает отлично. Это решает проблему незаполнения таблицы на всю ширину страницы, если в ней меньше столбцов.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>
4
ochomoswill

Я разобрался с этим ответом на основе предыдущего решения и его комментария и добавил некоторые свои собственные корректировки. Это работает для меня на адаптивном столе.

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}
2
George Wu

У меня был хороший успех с решением, предложенным @Serge Stroobandt, но я столкнулся с проблемой, возникшей у @Shevy с ячейками, которые не заполняли всю ширину таблицы. Я смог это исправить, добавив несколько стилей в tbody.

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

Это работало для меня в Firefox, Chrome и Safari на Mac.

2
Mary7678

«Ширина таблицы более 100%» действительно заставила меня работать.

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

0
Peps