HTML または CSS で表のセルの絶対最小幅を指定するにはどうすればよいですか

StackOverflow https://stackoverflow.com/questions/56658

  •  09-06-2019
  •  | 
  •  

質問

まとめ

表のセルが特定の最小幅未満にならないようにする最善の方法は何ですか。

例

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

ブラウザの互換性

おそらく、次の方法で機能する解決策を見つけたいと思います

  • IE6-8
  • FF2-3
  • サファリ

優先順に。

役に立ちましたか？

解決

この CSS で十分です。

td { min-width: 100px; }

ただし、すべてのブラウザーが常にこれ (min-width 属性) に正しく従うわけではありません (たとえば、IE6 はこれを非常に嫌います)。

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

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

他のヒント

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

これが古い質問であることは承知していますが、言及されていないことを共有したいと思いました（概念としては非常に単純ですが..）。 <div> テーブル内 (いずれかのテーブル) <td>'s など) を設定して、 <div> に min-width. 。テーブルはそこで止まります <div>の幅。誰かがグーグルでこれを見つけた場合に備えて、それをそこに投げておこうと思いました。また、min-width が I.E6 でどのように処理されるかについてはよくわかりません。しかし、それはすでに別の回答でカバーされています。

私は次のような方法である程度の成功を収めました。

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

Vatos の応答と min-height の記事の組み合わせに基づいています。 http://www.dustindiaz.com/min-height-fast-hack/

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

min-width: 100px

ただし、間違っていない限り、IE6では実際には機能しません

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

nowrap="nowrap"

テーブルデータタグ内で

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

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

IE 6 は理解できません!重要
IE 6 では幅/高さ:200px が認識されます (自動上書き)

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

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

ところで:

Vatos の応答と min-height の記事の組み合わせに基づいています。 http://www.dustindiaz.com/min-height-fast-hack/

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

IE6 は幅を min-width として処理します。

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

IE6 で通常のブラウザと同じように幅を処理したい場合は、overflow:visible を指定します。(ここでは当てはまりません)

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top