2

次のようなテーブルがあります。

ここに画像の説明を入力

私がやりたいのは、高さまたは特定の行数を証明した後、ヘッダーの自転車 - 車 - トラックを表示したままスクロール可能にすることです。私は十分なGoogle検索を行い、このような他のスタックオーバーフローの投稿を見ました。その投稿の受け入れられた回答でもjsfiddle.netソリューションを試しました。しかし、それは私のテーブルを次のようにします：

ここに画像の説明を入力

これが私のhtmlコードへのリンクです。乱雑に見えるかもしれませんが、スクロールが機能するかどうかを確認するためにテーブル データを貼り付けただけです。これはtablestyle.cssです。public.css ファイルはこの歪みとは何の関係もないと思います。重要な場合は、それもアップロードします。手がかり/助けをいただければ幸いです！

4

2 に答える 2

4

それを修正するために、次の css を追加しました。

HTML では、最初のものtrをthead(必須ではありませんが、推奨されます)でラップしました。

CSS :

table.list {
    width:100%;
}
table.list thead {
    display: table;
    float: left;
    width: 100%;
}
table.list thead th {
    text-align: center;
}
table.list tbody {
    float: left;
    width: 100%;
}
table.list tbody tr {
    display: table;
    width: 100%;
}
table.list th, td {
    width: 25%;
}

働くフィドル

この修正をクロスブラウザにしたいかもしれません。次に、このリンクにアクセスしてください。

于 2013-06-14T07:14:44.813 に答える
2

これを試して

CSSの一部を変更しました

tbody#scrolling { height: 120px; overflow-x: hidden; overflow-y:scroll; display: block;}
td#vehicles, th#vehicles {  border: 0 none; height: 30px; min-width:153px; }
thead{
    width:100%;
    display:block;
}

にも追加さtheadれましたtable

ここにjsFiddleファイルがあります

また、テーブルで 1 つの ID を複数回使用していますが、これは有効なコードではありません。クラスに変更します。

于 2013-06-14T07:20:23.730 に答える