0

次のように CSS を使用してテーブルをフォーマットする方法:

  1. テーブルはブラウザの水平スクロール バーが表示されない画面内にあり、ユーザーはテーブルの右側を見るために水平方向にスクロールする必要はありません。

  2. セルは必要なだけ幅を使用し、「1」、「21」などの数字のみを含むセルを含む列は、その列のすべてのセルのすべての数字を表示するために必要な幅よりもはるかに広い幅を使用しません。 4 文字幅。つまり、これよりも多くの文字を使用すると、水平方向のスペースが無駄になります。

  3. 非常に幅の広いセル、またはより正確には、許可されている場合に大きな幅を占有するコンテンツを含む列の場合、1) と 2) に違反しないようにできるだけ多くの幅を使用し、セルのコンテンツ全体を表示できない場合、そのセルに水平スクロールバーを表示させます。

これは、Windows および Mac OS X の最新の Firefox および Google chrome の CSS で実行できますか?

4

2 に答える 2

1

私の最初の試みは CSS に基づいていました: Constrain a table with long cell contents to page width? 、 thenでネストされた を使用しdivます。絶対配置された div のサイズは考慮されません。これは、テーブルの幅には適していますが、行の高さには適していません。スクロールバーを含むように拡張されません。position: relativeposition: absolute

次に、<td> 幅を設定して、表示されたコンテンツを視覚的に切り捨てるにはどうすればよいですか?で提案されているように試しました。 . これにより、セルのコンテンツのサイズを無視するという目標も達成されますが、そうすると、以前のように、最後の列が残りの幅をすべて使用するように指定できなくなります。table-layout: fixed

参照: <td> で overflow:hidden が機能しないのはなぜですか? .

于 2012-08-15T19:13:19.493 に答える
0

次のヒントが役立ちます。

1- セルの幅を指定しないでください。 2- ページを自動的に挿入すると、次のようなスタイルが作成されて割り当てられます。

削除してください。そうすれば、テーブルが非常に小さくなり、セルの内容に適応します。

3-数値のように1行にとどめたいフィールドにはセルのnowrapプロパティを使用しますが、大きなテキストには設定せず、複数行にできます。

4- テーブルの幅を設定するか、テーブルをパネルに入れてパネルの幅を設定することができます。

1行だけスクロールバーを表示する方法がわかりませんが、複数行で表示する場合、そのオプションは必要ないと思います。

于 2012-08-15T18:21:17.653 に答える