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


148

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


3
... думал о том, чтобы поместить всю таблицу в div? ... затем добавить прокрутку в div?
вектор

3
Может быть, пора изменить, какой ответ будет принятым?
Serge

Ответы:


82

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

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

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


16
Судя по моим собственным попыткам и всему остальному, что я читал в Интернете, это просто не сработает. Конечно, вы можете переполнить элемент оболочки, но не саму таблицу.
bloudermilk

23
@bloudermilk Можно, если добавишь display: block.
Cees Timmerman

262

Сначала сделайте display: blockиз своего стола

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

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

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

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


3
У меня это работает в Chrome, но только после того, как все сложится. white-space: nowrap;помогает сразу увидеть полосу прокрутки.
Cees Timmerman

30
Я действительно пробовал это раньше. Единственная проблема заключалась в том, что ячейки таблицы больше не занимали всю ширину таблицы.
Shevy

4
По словам других, это не работает должным образом: строки таблицы не заполняют ширину таблицы.
collimarco

1
@SergeStroobandt нет, в моем случае white-space: nowrap;проблема не решается (проверено в Firefox). Ширина строк меньше ширины таблицы, когда не хватает содержимого (текста) для расширения строк.
collimarco

3
@collimarco Примечание. Мне пришлось использовать max-width: 100% для параметра inline-block.
кушетка

40

Оберните таблицу в DIV, задав следующий стиль:

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

8
Кажется, что overflow:autoздесь нет необходимости. Знаете ли вы, как добиться этого без установки ширины ... это всегда кажется решением в html - жестко закодируйте некоторую ширину или высоту, но это, похоже, лишает смысла наличие механизма компоновки!
JonnyRaa


13

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

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

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

2
white-space: nowrap;, Кажется необязательным.
Майк Шиян

Превосходно! Стилизация оболочки div вместо таблицы решила проблему, когда таблица не заполняла всю ширину страницы, когда в ней мало столбцов.
Леопольдо Санчик

13

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

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

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

У меня это сработало в Firefox, Chrome и Safari на Mac.


10

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

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>


У меня тоже ничего из вышеперечисленного не сработало, но это сработало. Хороший, спасибо.
Gábriel

@ Gábriel Рад, что у вас сработало. Я попробовал это снова только сейчас в Firefox, и, похоже, он отображается неправильно :-( i.imgur.com/BcjSaCV.png Chrome все еще выглядит хорошо.
mpen

1
Странный; Я использовал его именно в Firefox, и он работал там, хотя и не в этой точной настройке. Я хотел отрендерить большую сетку, состоящую из блоков размером 10 x 10 пикселей со свернутыми границами и максимальной шириной + overflow-x: auto, казалось, было ключевым. С ними все выглядело идеально. Кроме того, я вообще не использую <table>, только div с display: table, table-row и table-cell.
Габриэль


2

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

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

@Saeed Вы имели в виду что-то вроде структуры html?
Джордж

Мое плохое, я имею в виду добавить больше объяснений, чтобы лучше понять это
Мастиса

Надеюсь, эта версия более прояснена.
Джордж

2

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

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

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


1

Вставьте таблицу в div, чтобы таблица занимала всю длину

HTML

<div class="scroll">
 <table>  </table>
</div>   

CSS

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


-2
//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

Отступы и образцы данных помогут, если вы собираетесь что-то продемонстрировать. Кроме того, вы имели в виду «полосу прокрутки» вместо «Выпадающий список»?
Cees Timmerman
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.