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

Question

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

Answer 1

Spróbuj użyć właściwości CSS overflow. Istnieją również oddzielne właściwości do definiowania zachowania tylko przelewu poziomego (overflow-x) i przelewu pionowego (overflow-y).

Skoro chcesz tylko pionowy zwój, spróbuj tego:

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

---

EDIT:

Widocznie <table> elementy nie szanują własności overflow. Wygląda na to, że elementy <table> nie są domyślnie renderowane jako display: block (w rzeczywistości mają swój własny typ wyświetlania). Można wymusić właściwość overflow pracować przez ustawienie elementu <table> być typ bloku:

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

Należy pamiętać, że spowoduje to element mieć szerokość 100%, więc jeśli nie chcesz, aby zająć całą poziomą szerokość strony, należy również podać jawną szerokość elementu.

Answer 2

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

<div style="height: 500px; overflow: auto;"> 
<table> 
</table> 
</div>