Dodaj poziomy pasek przewijania do tabeli html

142

Czy istnieje sposób na dodanie poziomego paska przewijania do tabeli HTML? Właściwie potrzebuję, aby można go było przewijać zarówno w pionie, jak iw poziomie, w zależności od tego, jak rośnie tabela, ale nie mogę wyświetlić żadnego paska przewijania.

Tsundoku
źródło
3
... myślałeś o umieszczeniu całego stołu w div? ... następnie dodaj przewiń do div?
wektor
3
Może czas zmienić, która odpowiedź będzie akceptowana?
Serge Stroobandt

Odpowiedzi:

82

Czy wypróbowałeś overflowwłaściwość CSS ?

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

AKTUALIZACJA
Jak wskazują inni użytkownicy, to nie wystarczy, aby dodać paski przewijania.
Dlatego prosimy o zapoznanie się z poniższymi komentarzami i odpowiedziami oraz ich głosowanie.

pasine
źródło
15
Według moich własnych prób i wszystkiego, co przeczytałem w Internecie, to po prostu nie zadziała. Oczywiście możesz przepełnić element opakowania, ale nie samą tabelę.
bloudermilk
21
@bloudermilk Możesz, jeśli dodasz display: block.
Cees Timmerman
244

Najpierw zrób display: blockze swojego stołu

następnie ustaw overflow-x:na auto.

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

Ładnie i czysto. Bez zbędnego formatowania.

Oto bardziej zaangażowane przykłady z przewijanymi podpisami tabeli ze strony w mojej witrynie.

Serge Stroobandt
źródło
3
To działa dla mnie w Chrome, ale tylko po zgnieceniu wszystkiego razem. white-space: nowrap;pomaga natychmiast zobaczyć pasek przewijania.
Cees Timmerman
28
Właściwie próbowałem tego wcześniej. Jedynym problemem było to, że komórki tabeli nie wypełniały już całej szerokości tabeli.
Shevy
4
Jak powiedzieli inni, nie działa to poprawnie: wiersze tabeli nie wypełniają szerokości tabeli.
collimarco
1
@SergeStroobandt nie, w moim przypadku white-space: nowrap;nie rozwiązuje problemu (testowane na Firefoksie). Szerokość wierszy jest mniejsza niż szerokość tabeli, gdy nie ma wystarczającej ilości treści (tekstu), aby rozszerzyć wiersze.
collimarco,
3
@collimarco Uwaga Musiałem użyć max-width: 100% dla opcji inline-block.
dogoncouch
40

Owiń stół w DIV, ustawionym w następującym stylu:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}
Colin M.
źródło
8
Wydaje się, że overflow:autotutaj jest niepotrzebne. Czy wiesz o tym, aby osiągnąć to bez ustawiania szerokości ... to zawsze wydaje się być rozwiązaniem w html - zakoduj na stałe jakąś szerokość lub wysokość, ale wydaje się, że pokonuje sens posiadania silnika układu!
JonnyRaa
17

Użyj do tego atrybutu CSS „ overflow ”.

Krótkie podsumowanie:

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

na przykład

table {
    display: block;
    overflow: scroll;
}
Roger Willcocks
źródło
podany link jest uszkodzony
justingordon
12

Odniosłem dobry sukces z rozwiązaniem zaproponowanym przez @Serge Stroobandt, ale napotkałem problem, który @Shevy miał z komórkami, które nie wypełniały pełnej szerokości tabeli. Udało mi się to naprawić, dodając kilka stylów do tbody.

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

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

To działało dla mnie w Firefoksie, Chrome i Safari na Macu.

Mary7678
źródło
10

Nie udało mi się uruchomić żadnego z powyższych rozwiązań. Jednak znalazłem hack:

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>

mpen
źródło
Żadne z powyższych też nie zadziałało, ale tak się stało. Niezłe, dzięki.
Gábriel
@ Gábriel Cieszę się, że to zadziałało. Próbowałem tego ponownie w przeglądarce Firefox i wygląda na to, że nie renderuje się poprawnie :-( i.imgur.com/BcjSaCV.png Chrome nadal wygląda dobrze.
mpen
1
Dziwne; Używałem go dokładnie w przeglądarce Firefox i tam działało - chociaż nie w tej dokładnej konfiguracji. Chciałem wyrenderować dużą siatkę składającą się z elementów div 10 x 10 pikseli ze zwiniętymi krawędziami i maksymalną szerokością + overflow-x: auto wydawało się być kluczem. Z tymi na miejscu wszystko wyglądało idealnie. Poza tym w ogóle nie używam <table>, tylko elementy div, z wyświetlaniem: table, table-row i table-cell.
Gábriel
10

To ulepszenie odpowiedzi Serge'a Stroobandta i działa doskonale. Rozwiązuje problem nie wypełniania całej szerokości strony, jeśli ma mniej kolumn.

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

<div class="table_wrapper">
<table>
...
</table>
</div>
ochomoswill
źródło
2
white-space: nowrap;Wydaje się być opcjonalne.
Mike Shiyan
8

Miałem ten sam problem. Odkryłem następujące rozwiązanie, które zostało przetestowane tylko w Chrome v31:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}
Josh
źródło
2

Zrozumiałem tę odpowiedź w oparciu o poprzednie rozwiązanie i jego komentarz oraz dodałem kilka własnych poprawek. To działa dla mnie na responsywnym stole.

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;
}
Jerzy
źródło
@Saeed Czy chodziło Ci o coś w rodzaju struktury html?
George
Mój błąd, mam na myśli dodaj więcej wyjaśnień, aby lepiej to zrozumieć
Mastisa
Mam nadzieję, że ta wersja jest bardziej wyjaśniona.
George
1

„Ponad 100% szerokości” stołu naprawdę sprawiło, że to zadziałało.

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

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

Peps
źródło
-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>
kinzzy goel
źródło
Wcięcia i przykładowe dane pomogłyby, jeśli zamierzasz coś demonstrować. Czy miałeś na myśli „pasek przewijania” zamiast „menu rozwijanego”?
Cees Timmerman,