2

シンプルなテーブルがあります。シンプルな CSS と私の頭脳を使って、スクロール可能なtbody.

この件が何度も議論されたことは知っていますが、他の問題の解決策がわかりませんでした。

スクロール可能な場合tbody、スクロールは右側に表示され、tbodyこの場合、テーブルとセルが変形します。

例 -> JsFiddle (巨大な HTML コードと CSS コードを投稿することは避けています)。

tbodyスクロールバーが表示されると、セルが変形していることがわかります。

2 つの質問があります。

  1. 表のセルが変形するのはなぜですか? のためtable-layout: fixed？

  2. .ov { height: 30%; overflow: auto; }の代わりに置く .ov { height: 30px; overflow: auto; }と、スクロールバーが表示されず、本体の高さがいっぱいになります。

ありがとうございました。

4

2 に答える 2

1

まあ、私は作業する必要があるいくつかのテーブルで同じ問題を抱えていますが、IE ではもう少し注意が必要です。同じコードを使用して、jsfiddle に 2 つの CSS スタイルを追加し、新しい CSS クラスを参照する HTML 要素の 1 つにクラスを追加しました。リンクは次のとおりです：jsfiddle

これが私が追加したコードです（CSSクラス名が不十分です）。

thead td { width: 49px; }
.extra { width: 67px; vertical-align: top }

クラスは、広告セクションの 3 列目に配置します

<td class="extra">Column 3</td>

これを FireFox (最新バージョン) でテストしました。唯一の問題は、スクロール バーの幅が含まれるため、3 列目のヘッダー フィールドが大きくなることです。

それが役立つことを願っています。

于 2012-08-22T07:00:39.327 に答える
0

これはごく普通のことです。スクロールはあなたの中に現れていますtbody。ただし、スクロールバーにはボタンを表示するためのスペースが必要であり、それがセルを押している理由です。table-layout: fixedここでは何の役割もありません。その行をフィドルから削除してみてください。JavaScript スクロール バー ソリューションを試してみてください。

于 2012-08-19T09:26:28.590 に答える