web-dev-qa-db-ja.com

テーブルをスクロール可能にする方法

Htmlとcssだけを使用してテーブルの本体をスクロール可能にするバニラの方法を知っている人はいますか？

明白な解決策

tbody {
    height: 200px;
    overflow-y: scroll;
}

動作しません。

これは明らかにテーブルの使い方ではないでしょうか？

私は何か間違ったことをしていますか？

htmlcsscss-tables
17
Martin Kristiansen

最初に高さを宣言する必要があります。そうしないと、テーブルがその内容に従って拡大されます。

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

編集：あなたの問題を明確にした後、私はフィドルを編集しました： この例 または そのように を確認してください。それはかなりハックであり、クロスブラウザを動作させるために隔離されていませんが、あなたのケースでは動作するかもしれません。

29
Christoph

テーブルではそれはできません。テーブルをdivでラップし、次のようにします。

div.wrapper {
    overflow:hidden;
    overflow-y: scroll;
    height: 100px; // change this to desired height
}
10
scoota269

このような何かをしたいですか？

固定ヘッダー付きの純粋なCSSスクロール可能テーブル（1）

http://anaturb.net/csstips/sheader.htm

http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

1
RMN