CSS min-width のスタイルはIEだと適用されない

Question

Webページのtableのスタイルに対して
min-width
を適用しても反映されません。※
※ キャッシュが残っているとかの問題ではありません。

table-layout:fixed
を使用したら反映されると思ったのですが、逆に幅が小さくなります。（最少幅を指定しているので小さくなるのはあり得ません。）

どなたかこの現象の解消法をご存知の方がいらっしゃいましたらご教授ください。

Comments

[noise]

状況をよく理解できておりませんが、IE7以下であれば、そもそもmin-widthが使えないからとかでしょうか。
あるいは、モダンなバージョンのIEで発症するケースでしょうか。
少々情報が少ないように感じられますれば、IEのバージョンや、min-widthが利かなくなる該当テーブルのソースおよびCSS・styleを質問を編集して追記いただければ、様々な方から有益な回答が得られるかもしれません。

[dshukertjr]

具体的になんの要素のmin-widthが適用されないのでしょうか？

Answer 1

tdに min-widthではなく widthを指定しても効かないですか？

table {
	border-collapse:collapse;
	table-layout:fixed;
}
td {
	width:50px;
	border:1px solid #CCC;
}

<table>
<tr>
<td>文字列</td>
<td>文字列</td>
<td>文字列文字列文字列</td>
</tr>
<tr>
<td>ああああああああああああa</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>文字列</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>文字列</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>文字列</td>
<td>a</td>
</tr>
</table>

Answer 2

min-widthは、tableには効きません。
divを使って囲み、min-widthで指定します。tableはwidthは100%にしておきます。

Comments

[WhiteJack]

具体的には、css部は、

div {
min-width: 450px;
}
table {
width: 100%;
border: 2px;
border-collapse: collapse;
}
td, th {
border: 2px #2b2b2b solid;
}

html部は、

<div>
<table>
<tr>
<th>NO</th><th>テスト</th>
</tr>
<tr>
<td>1</td><td>TEST</td>
</tr>
<tr>
<td>2</td><td>TEST</td>
</tr>
</table>
</div>

[WhiteJack]

あ、ごめんなさい。WhiteJack0202もWhiteJackも同一人物です。

Answer 3

他の方も回答されてますが、table系要素にmin-widthは効きません。そういう仕様です。
多分他のブラウザでも効いてないと思うのですが、本当にIEだけですか？

ちなみにtable系に設定されたwidthは、ある意味min-widthのような働きをします。
セルの中にtableに設定されたwidthよりも大きなwidthが指定されたコンテンツが入ると、
tableから中身がはみ出すのではなく、中身のコンテンツに合わせてtable自体のサイズが広がります。

レスポンシブのサイトなどで、
「基本的にはwidth: 100%;なんだけど、300px以下にはしたくない」みたいなケースの場合は
他の方の回答にあるようにtableをdivでくるんでdivにmin-width、tableにwidth:100%;
のようにする必要がありますが、単純に
「最小サイズは決めておくが中のコンテンツが大きくなったら成り行きで広げる」
という目的ならtableにwidthを指定しておけばそのように動きます。

Answer 4

これで効かないって事？

<table>
  <tr>
    <td style="min-width:200px; border:1px solid #999999">
      ああああ
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="min-width:200px; border:1px solid #999999">
      ああああああああああ
    </td>
  </tr>

</table>
<table>
  <tr>
    <td style="min-width:200px; border:1px solid #999999">
      ああああああああああああああああああああ
    </td>
  </tr>
</table>