サイズ指定したテーブルを縦に並べるとセルがズレる

色々と試しているんですが解決できないので教えてください。
CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容（テキストの長さ）によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。

.menu-table{
width:500px;
padding:0px;
border-collapse:collapse;
}
.menu-title{
margin:0px;
padding:5px;
border:1px solid #ff9900;
}
.menu-img{
width:110px;
margin:0px;
padding:5px;
border:1px solid #ff9900;
}
.menu-style1{
width:70px;
margin:0px;
padding:5px;
border:1px solid #ff9900;
}
.menu-style2{
width:300px;
margin:0px;
padding:5px;
}
.menu-style3{
margin:0px;
padding:5px;
}

<table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table">
<tr>
<td colspan="3" class="menu-title">商品名</td>
</tr>
<tr>
<td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td>
<td class="menu-style1">説明1</td>
<td class="menu-style2">あいうえお</td>
</tr>
<tr>
<td class="menu-style1">説明2</td>
<td class="menu-style2">かきくけこ</td>
</tr>
<tr>
<td class="menu-style1">価格</td>
<td class="menu-style2">\1,000￥</td>
</tr>
<tr>
<td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td>
</tr>
</table>

こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。

No.1 回答者： naokita 回答日時： 2007/04/20 23:24

ＩＥ６では同じに見えますが？・・・（Fireでも）

よって未確認ですが、
110+70+300が500pxには全然少ないので、そのせいかも？・・・

＞ボーダーの幅のぶんも計算に入れて
:collapse;なのでボーダーの分が増幅されてるわけではありません。


説明１を絶対値の70pxにしたいのなら

.menu-style1{
width:70px !important;
margin:0px;
padding:5px;
border:1px solid #ff9900;
}

この回答へのお礼

ありがとうございました。
色々とやってるうちに解決してしまいました。
一番の原因は、本当にありえないんですが、目の錯覚でした。
直ってるのに直ってないと思ってまた修正して・・・を
繰り返してたようです。失礼いたしました。

お礼日時：2007/04/21 07:33