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

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.

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.

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>

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