51

概要

テーブルセルが特定の最小幅より小さくならないようにするための最良の方法は何ですか。

例

テーブルコンテナの幅に関して、テーブル内のすべてのセルの幅が少なくとも100ピクセルであることを確認したいと思います。使用可能なスペースがさらにある場合は、テーブルセルがそのスペースを埋める必要があります。

ブラウザの互換性

私は可能です私はで動作する解決策を見つけたいと思います

  • IE 6-8
  • FF 2-3
  • サファリ

優先順に。

4

7 に答える 7

62

このCSSで十分です。

td { min-width: 100px; }

ただし、すべてのブラウザーで常に正しく（min-width属性）従うとは限りません（たとえば、IE6はこれを大いに嫌います）。

編集： IE6（およびそれ以前）のソリューションに関しては、私が知る限り、すべての状況で確実に機能するソリューションはありません。nowrap HTML属性を使用しても、最小幅を指定するのではなく、セルの改行を防ぐだけなので、実際には望ましい結果が得られません。

ただし、nowrapを通常のセル幅プロパティ（width：100pxの使用など）と組み合わせて使用​​すると、100pxは最小幅のように機能し、セルはテキストとともに拡張されます（nowrapのため）。これは理想的とは言えないソリューションであり、CSSを使用して完全に適用することはできないため、これを適用するテーブルが多数ある場合は、実装が面倒になります。（もちろん、セルに動的な改行を入れたい場合は、この代替ソリューション全体が失敗します）。

于 2008-09-11T14:22:49.317 に答える
9

もう1つのハックは、古い1x1の透明なピクセルトリックです。1x1の透明なgif画像を挿入し、画像タグの幅を希望の幅に設定します。これにより、セルの幅が少なくとも画像と同じになります。

于 2008-09-11T14:31:13.637 に答える
6

これは古い質問だと思いますが、言及されていないものを共有したいと思いました（概念はかなり単純ですが）。<div>テーブルの中に（<td>のいずれかなどで）入れて、<div>にmin-width。テーブルは<div>の幅で停止します。誰かがグーグルでこれに出くわした場合に備えて、私はそれをそこに投げると思った。また、I.E6で最小幅がどのように処理されるかについてもよくわかりません。しかし、それはすでに別の答えでカバーされています。

于 2011-08-29T03:37:20.953 に答える
4

私はいくつかの成功を収めました：

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Vatosの応答とここの最小の高さの記事の組み合わせに基づいています：http ：//www.dustindiaz.com/min-height-fast-hack/

于 2009-06-17T15:59:11.360 に答える
2

このcssプロパティはどうですか

min-width: 100px

しかし、間違えなければ、IE6では実際には機能しません

cssの方法でそれをしたくない場合は、この属性を追加できると思います

nowrap="nowrap"

テーブルデータタグ内

于 2008-09-11T14:23:51.983 に答える
2

これは、最小幅および/または最小高さを設定するためのクロスブラウザーの方法です。

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}


IE 6 が理解できない!

他のブラウザは min- と !important を理解しています

私は TD 要素の幅の動作に 100% 精通しているわけではありませんが、これはすべて DIV タグなどでうまく機能します

ところで：

Vatos の応答とここの min-height 記事の組み合わせに基づく: http://www.dustindiaz.com/min-height-fast-hack/

最初の 2 行の順序が原因で、これは機能しません。正しい順序にする必要があります (上記について考えてください) ;)

于 2011-02-23T22:27:56.370 に答える
0

IE6 は幅を最小幅として処理します。

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

IE6 で通常のブラウザーのように幅を処理する場合は、overflow:visible; を指定します。（ここではそうではありません）

于 2008-09-11T14:45:54.893 に答える