Dodaj poziomy scrollbar do tabeli html
Czy istnieje sposób na dodanie poziomego paska przewijania do tabeli HTML? I rzeczywiście trzeba to być przewijanie zarówno w pionie i poziomie w zależności od tego, jak tabela rośnie, ale nie mogę dostać albo scrollbar się pojawić.
9 answers
Próbowałeś CSS overflow
właściwość?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
UPDATE
Jak podkreślają inni użytkownicy, to nie wystarczy , aby dodać paski przewijania.
Więc proszę, Zobacz i upvote komentarze i Odpowiedzi poniżej.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-22 23:45:38
Najpierw stwórz display: block
swoją tabelę
Następnie Ustaw overflow-x:
na auto
.
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
Ładnie i czysto. Bez zbędnego formatowania.
Oto więcej przykładów z przewijaniem podpisów tabel ze strony na mojej stronie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-25 18:15:45
Zawiń tabelę w DIV, ustawiony w następującym stylu:
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-04 01:04:11
Użyj do tego atrybutu CSS " overflow".
Krótkie podsumowanie:
overflow: visible|hidden|scroll|auto|initial|inherit;
Np.
table {
display: block;
overflow: scroll;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-17 13:18:27
Wpadłem na 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-26 21:10:20
Nie udało mi się uruchomić żadnego z powyższych rozwiązań. Znalazłem jednak hacka:
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-19 19:08:46
Wymyśliłem tę odpowiedź na podstawie poprzedniego rozwiązania i jest to komentarz {[3] } i dodałem kilka poprawek własnych. To mi pasuje na stole responsywnym.
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-15 12:15:14
Jest to ulepszenie odpowiedzi Serge ' a Stroobandta i działa doskonale. Rozwiązuje to problem, w którym tabela nie wypełnia 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-18 20:39:07
//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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-01 07:45:15