みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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


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

投稿日時 - 2011-06-30 18:11:15

QNo.6845444

すぐに回答ほしいです

質問者が選んだベストアンサー

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>

これでどうでしょう?

投稿日時 - 2011-07-01 11:48:45

補足

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

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

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

投稿日時 - 2011-07-01 17:22:07

お礼

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

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


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

投稿日時 - 2011-07-01 13:18:40

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

<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
でしょう。

投稿日時 - 2011-06-30 18:45:43

お礼

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


ここに記載するために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;;
}

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


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


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

投稿日時 - 2011-06-30 19:16:18

あなたにオススメの質問