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.
html
css
html-table
scrollbar
Tsundoku
źródło
źródło
Odpowiedzi:
Czy wypróbowałeś
overflow
właściwość CSS ?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.
źródło
display: block
.Najpierw zrób
display: block
ze swojego stołunastępnie ustaw
overflow-x:
naauto
.Ładnie i czysto. Bez zbędnego formatowania.
Oto bardziej zaangażowane przykłady z przewijanymi podpisami tabeli ze strony w mojej witrynie.
źródło
white-space: nowrap;
pomaga natychmiast zobaczyć pasek przewijania.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.Owiń stół w DIV, ustawionym w następującym stylu:
źródło
overflow:auto
tutaj 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!Użyj do tego atrybutu CSS „ overflow ”.
Krótkie podsumowanie:
na przykład
źródło
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
.To działało dla mnie w Firefoksie, Chrome i Safari na Macu.
źródło
Nie udało mi się uruchomić żadnego z powyższych rozwiązań. Jednak znalazłem hack:
źródło
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.
źródło
white-space: nowrap;
Wydaje się być opcjonalne.Miałem ten sam problem. Odkryłem następujące rozwiązanie, które zostało przetestowane tylko w Chrome v31:
źródło
table-layout: fixed
jest miłe.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.
źródło
„Ponad 100% szerokości” stołu naprawdę sprawiło, że to zadziałało.
źródło
źródło