CSSでtdの横幅の片方だけを指定したい

質問

横２列の　table　を配置して、一方の tdのみ 120px で強制的に確保したいです。

<table style="width:100%">
<tr>
<td style="width:120px;">120pxで固定したい</td>
<td>残りスペース全て使う </td>
</tr>
</table>

※ここに記載するため、styleで表記しています。

上記でCSS指定すると、ブラウザの横幅に合わせて伸縮してしまい120pxの幅より大きくなってしまいます。
伸縮せず120pxで強制する指定方法がございましたら教えてください。

回答No.2

hinananana · ベストアンサー

No.1です。

おそらく
#contentstable {width:100%; }
はブラウザに対してwidthが100%になっているから、ブラウザの横幅にあわせて伸縮しているのではないでしょうか？

/*--CSS--*/

#wrap{ width:750px; }

#contentstable { width:100%; }
#contentstable td#leftarea {
width:120px;
background-color:white;
padding:0 0;
vertical-align:top;
}
#contentstable td#mainarea {
vertical-align:top;
padding:60px 0 20px;
}

/*--HTML--*/

<div class="wrap">
<table id="contentstable" border="1">
<tr>
<td id="leftarea">120pxで固定したい</td>
<td id="mainarea">残りスペース全て使う </td>
</tr>
</table>
</div>

これでどうでしょう？

お礼

ありがとうございまうす。
確かにアドバイスの方法では伸縮せず強制できます。

ただ今回は、
#leftareaは120pxに保ったままで、
ブラウザの横を伸縮させた場合、
#leftareaの120pxを差し引いた横幅の中でセンター揃えにしたいため、
この方法では、固定テーブルと同じことになってしまい、
本来の目的を達成することができません。。。

すみません、面倒な要望で…

補足

お礼にすでに書き込んだ後に解決しましたので、こちらに書きます。

<td id="mainarea">のtdに、width="520"という数値が入ったままになっていました。
大変申し訳ございませんでした。
CSSの方ばかりに気をとられていたので、
HTMLのほうをしっかりチェックしてませんでした。

無事解決できましたことをお知らせするとともに
ご協力いただきましたことをお礼申し上げます。

回答No.1

hinananana

<table style="width:100%">
<tr>
<td style="width:120px;">120pxで固定したい</td>
<td>残りスペース全て使う </td>
</tr>
</table>

このままでもやりたいことはできるような・・・。
もしかしてCSSで

td{
width:120px;
}

としていませんか？
↑をすると、両方のtdにかかってしまうので表示が崩れているのだと・・・。

作るとしたら

<table width="100%">
<tr>
<td width="120">120px固定</td>
<td>残りのスペース</td>
</tr>
</table>

ですが
<table>
<tr>
<th width="120">120px固定</th>
<td>残りのスペース</td>
</tr>
</table>

のほうがいいかと。

で、いちいちthにwidthを入れるのは面倒なので
CSSで

th{
width:120px;
}

とするのが良いのかと。

最後に書くのもなんですが
カテゴリはおそらく
[技術者向] コンピューター > プログラミング > Webデザイン・CSS
でしょう。
もしくは
[技術者向] コンピューター > プログラミング > HTML
でしょう。

お礼

早速ありがとうございます。

ここに記載するためにstyleとしたのですが、実際には以下の通りです。
（初めからコピペすれば良かったですね…）

<table id="contentstable">
<tr>
<td id="leftarea">120pxで固定したい</td>
<td id="mainarea">残りスペース全て使う </td>
</tr>
</table>

#contentstable {width:100%; }
#contentstable td#leftarea {
width:120px;
background-color:white;
padding:0 0;
vertical-align:top;
}
#contentstable td#mainarea {
vertical-align:top;
padding:60px 0 20px;;
}

です。
ＩＥもFirefoxも、ブラウザの横幅に合わせて広くなります。（120pxより狭くなることはありません）

引き続き、原因が分かりましたらアドバイスをどうぞ宜しくお願い致します。

※カテゴリについてはすみません。CSSというのを見つけることができませんでした。。