Jak określić wysokość tabeli, aby pojawił się pionowy pasek przewijania?

101

Mam tabelę z wieloma wierszami na mojej stronie. Chciałbym ustawić wysokość tabeli, powiedzmy na 500px, tak aby jeśli wysokość stołu była większa niż ta, pojawi się pionowy pasek przewijania. Próbowałem użyć heightatrybutu CSS na stronie table, ale to nie działa.

Misha Moroshko
źródło
1
Może użyj max-heightzamiast, tak heightjak to ostatnie wymusi wysokość stołu500px
Fred
1
Możesz zadać drugie pytanie, aby zapobiec przewijaniu wiersza nagłówka. ;)
Bill Bingham
Zobacz także stackoverflow.com/questions/1587927/…
Alex Nolasco

Odpowiedzi:

173

Spróbuj użyć overflowwłaściwości CSS. Istnieją również oddzielne właściwości definiujące zachowanie tylko przepełnienia poziomego ( overflow-x) i przepełnienia pionowego ( overflow-y).

Ponieważ chcesz tylko przewijania w pionie, spróbuj tego:

table {
  height: 500px;
  overflow-y: scroll;
}

EDYTOWAĆ:

Najwyraźniej <table>elementy nie szanują overflowwłasności. Wydaje się, że dzieje się tak, ponieważ <table>elementy nie są renderowane jako display: blockdomyślne (w rzeczywistości mają swój własny typ wyświetlania). Możesz wymusić działanie tej overflowwłaściwości, ustawiając <table>element jako typ bloku:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Zwróć uwagę, że spowoduje to, że element będzie miał 100% szerokości, więc jeśli nie chcesz, aby zajmował całą poziomą szerokość strony, musisz również określić jawną szerokość elementu.

AgentConundrum
źródło
3
Nie ogranicza to jednak wysokości.
Fred
6
Nie, tak, po prostu musisz leżećdisplay:block na stole, aby zachowywał się jak div jsfiddle.net/TSGSA/1
Fred
2
@Fred: Wielkie umysły myślą podobnie. Zaktualizowałem moją odpowiedź, kiedy komentowałeś. :)
AgentConundrum
1
Ta odpowiedź naprawdę mi pomogła, ale zamiast zastosować ją do tagu tabeli, należy to zrobić w tbody, aby nagłówek pozostał statyczny podczas przewijania. Następnie trzeba uporządkować styl w odniesieniu do obszaru w ekranie, który znajduje się nad paskiem przewijania.
David,
7
Jeśli zamierzasz użyć tego w tbody, upewnij się, że dodałeś display: block do thead (i prawdopodobnie tfoot), inaczej mogą trochę oszaleć. Wydaje się, że problem polega na tym, że gdy to zrobisz, zerwiesz połączenie między thead i tbody: kolumny tego pierwszego nie są świadome szerokości drugiego. Więc łatasz to i zjeżdżasz po śliskim zboczu, po którym jedziesz. „
Umarłem
59

Musisz owinąć tabelę wewnątrz innego elementu i ustawić wysokość tego elementu. Przykład z wbudowanym css:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
Dark Falcon
źródło
9
Nie pozwoli to na utrzymanie urządzenia na miejscu podczas przewijania tbody.
David
22
Tego wymogu nie ma w pierwotnym pytaniu.
Dark Falcon
2
Druga (zaakceptowana) odpowiedź również nie utrzymuje tej karty na miejscu.
Brock Adams
Za pomocą tej metody nadal możesz sprawić, że będzie wyglądał na nagłówek. Ukrywasz nagłówek tabeli, a następnie tworzysz drugą tabelę powyżej pierwszej tabeli, która zawiera nagłówek. Następnie nadaj styl obu tabelom, aby miały display:table;wiersze display:table-row;i komórki, display:table-cell;a te dwie tabele dopasują się i będą wyglądać na jedno. (UWAGA: to nie działa z bardzo dużymi stołami; w zasadzie dopasowuje je, kiedy jest to możliwe. Użyłem tej techniki wiele razy.)
levininja
1
Pewnie. Aby użyć rozmiarów względnych, należy określić rozmiar rodzica. Na przykład: jsfiddle.net/hz8wy
Dark Falcon
1

aby ustawić wysokość tabeli, należy najpierw ustawić właściwość css „display: block”, a następnie dodać właściwości „szerokość / wysokość”. Uważam, że ten artykuł o Mozilli jest bardzo dobrym źródłem informacji o stylizowaniu tabel: Link

krupesh Anadkat
źródło