0

ここに私が作ったテーブルがあります: JSFiddle リンク

最初はうまくいっていましたが、テーブルにたくさんの行があったので、左側にスクロールを追加したかったのです。それを行うために、CSS の tbody に overflow:auto を設定しました。うまくいきませんでした。それから私は追加しました

#training_table thead, #training_table tbody {
    display:block;
}

その後、スクロールバーがありますが、リンクでわかるように、すべての行が圧縮されています。今、私はそれらを正しく見せることができません。私の間違いは何ですか？

編集: スクロール時にテーブルの頭が上がらないようにします。(常に表示されている必要があります)

4

2 に答える 2

1

から削除display: block;します#training_table thead, #training_table tbody

#training_tableそして、これらをに追加します。

height: 200px; // or whatever your limit is
display: table-cell;
overflow-y: scroll; //as per your preference 
overflow-x: hidden; //as per your preference

リンクのテスト -- フルスクリーン

リンクのテスト -- フィドル

于 2013-06-24T06:47:17.450 に答える
0


cssdisplay: block;に次の変更を加えるだけで問題なく動作します。display: block inline;

于 2013-06-24T06:34:54.540 に答える