Bagaimana cara menentukan tinggi tabel sehingga bilah gulir vertikal muncul?

101

Saya memiliki tabel dengan banyak baris di halaman saya. Saya ingin mengatur tinggi tabel, misalnya 500px, sehingga jika tinggi tabel lebih besar dari itu, scroll bar vertikal akan muncul. Saya mencoba menggunakan heightatribut CSS di table, tetapi tidak berhasil.

css css-tables Misha Moroshko
sumber
1
Mungkin menggunakan max-heightalih-alih hanya heightkarena yang terakhir akan memaksa tinggi meja menjadi500px
Fred
1
Anda mungkin ingin mengajukan pertanyaan kedua, tentang menjaga agar baris tajuk tidak bergulir. ;)
Bill Bingham
Lihat juga stackoverflow.com/questions/1587927/…
Alex Nolasco

Jawaban:

173

Coba gunakan overflowproperti CSS. Ada juga properti terpisah untuk menentukan perilaku overflow horizontal ( overflow-x) dan overflow vertikal (overflow-y ).

Karena Anda hanya menginginkan gulungan vertikal, coba ini:

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

EDIT:

Rupanya <table>elemen tidak menghormati overflowproperti. Ini tampaknya karena <table>elemen tidak ditampilkan display: blocksecara default (sebenarnya mereka memiliki tipe tampilan sendiri). Anda dapat memaksa overflowproperti untuk bekerja dengan menyetel <table>elemen menjadi tipe blok:

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

Perhatikan bahwa ini akan menyebabkan elemen memiliki lebar 100%, jadi jika Anda tidak ingin elemen tersebut memenuhi seluruh lebar horizontal halaman, Anda juga perlu menentukan lebar eksplisit untuk elemen tersebut.

AgentConundrum
sumber
3
Ini tidak membatasi ketinggian.
Fred
6
Tidak, itu benar, Anda hanya perlu display:blockdi atas meja untuk membuatnya berperilaku seperti div jsfiddle.net/TSGSA/1
Fred
2
@Fred: Pemikiran hebat berpikir sama. Saya memperbarui jawaban saya saat Anda berkomentar. :)
AgentConundrum
1
Jawaban ini sangat membantu saya, tetapi alih-alih menerapkannya ke tag tabel, itu harus dilakukan ke tbody, agar header tetap statis saat di-scroll. Lalu ada beberapa gaya yang harus dipilah sehubungan dengan area di thead yang berada di atas bilah gulir.
David
7
Jika Anda akan menggunakan ini pada tbody, pastikan Anda menambahkan display: block ke thead (dan mungkin tfoot) atau mereka bisa menjadi sedikit gila. Masalahnya, tampaknya, adalah bahwa setelah Anda melakukan ini, Anda telah memutuskan hubungan antara thead dan tbody: kolom yang pertama tidak mengetahui lebar yang terakhir. Jadi Anda menambalnya dan menuruni lereng licin Anda pergi. "Aku mati demi kecantikan ..."
Cuse70
59

Anda perlu membungkus tabel di dalam elemen lain dan mengatur tinggi elemen itu. Contoh dengan inline css:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
Falcon Gelap
sumber
9
Ini tidak akan memungkinkan untuk menjaga thead di tempatnya saat tbody menggulir.
David
21
Persyaratan ini tidak ada dalam pertanyaan awal.
Dark Falcon
2
Juga, jawaban lain (yang diterima) tidak menjaga thead tetap di tempatnya.
Brock Adams
Anda masih bisa membuatnya tampak seperti header dengan metode ini. Anda menyembunyikan header tabel, lalu membuat tabel kedua di atas tabel pertama yang memiliki header di dalamnya. Kemudian, berikan gaya pada kedua tabel agar memiliki display:table;baris display:table-row;dan selnya display:table-cell;serta kedua tabel akan cocok dan tampak menjadi satu. (CATATAN: ini tidak bekerja dengan tabel yang sangat besar; pada dasarnya, itu cocok ketika itu bisa. Saya telah menggunakan teknik ini beberapa kali.)
levininja
1
Tentu. Ukuran induk harus ditentukan untuk menggunakan ukuran relatif. Misalnya: jsfiddle.net/hz8wy
Dark Falcon
1

untuk mengatur tinggi tabel, Anda perlu mengatur properti css "display: block" terlebih dahulu, kemudian Anda dapat menambahkan properti "lebar / tinggi". Menurut saya, Artikel Mozilla ini adalah sumber yang sangat bagus untuk mempelajari cara mengatur gaya tabel: Tautan

krupesh Anadkat
sumber