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ć height
atrybutu CSS na stronie table
, ale to nie działa.
css
css-tables
Misha Moroshko
źródło
źródło
max-height
zamiast, takheight
jak to ostatnie wymusi wysokość stołu500px
Odpowiedzi:
Spróbuj użyć
overflow
wł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:
EDYTOWAĆ:
Najwyraźniej
<table>
elementy nie szanująoverflow
własności. Wydaje się, że dzieje się tak, ponieważ<table>
elementy nie są renderowane jakodisplay: block
domyślne (w rzeczywistości mają swój własny typ wyświetlania). Możesz wymusić działanie tejoverflow
właściwości, ustawiając<table>
element jako typ bloku: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.
źródło
display:block
na stole, aby zachowywał się jakdiv
jsfiddle.net/TSGSA/1Musisz owinąć tabelę wewnątrz innego elementu i ustawić wysokość tego elementu. Przykład z wbudowanym css:
źródło
display:table;
wierszedisplay: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.)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
źródło