WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:<table width="100%">で、幅を整える方法

0:[投稿] q [2004/03/08 17:46 ][環境:IE6 apache]

tableをwidth="100%"にすると、適当に各tdの幅が決定されますが、
一番左の<td>の長さにジャストにあわせて残りの幅を全部残りの<td>に
割り振るといったようなことは出来ますでしょうか?

------------------------------------------------------
以下のようなテーブルの場合、普通に以下のようにすると一番左側の
<td>内の幅に合わせてborderが引かれますが、<table width="100%"
とすると、表としての格好が悪くなってしまうのです。

<table border="1">
    <tr><td>AAA</td><td>データa</td></tr>
    <tr><td>BBB</td><td>データb</td></tr>
    <tr><td>CCC</td><td>データc</td></tr>
</table>

これを回避する方法はありますでしょうか?


1:[回答] 悩める学生 [2004/03/08 19:43 ]

あんまり詳しくないんですが
<table border="1" width="100%">
   <tr><td width="3%">AAA</td>
   <td width="97%">データa</td></tr>
   <tr><td>BBB</td><td>データb</td></tr>
   <tr><td>CCC</td><td>データc</td></tr>
</table>
こういうのじゃだめでしょうか?


2:[回答] … [2004/03/08 19:59 ]

>>0
col,colgroup要素を学んでください。
http://www.kanzaki.com/docs/html/htminfo16.html#colgr
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#type-multi-length

<table border="1" width="100%">
 <col style="width:3em">
 <col style="width:auto">
 <tbody>
   <tr><td>AAA</td><td>データa</td></tr>
   <tr><td>BBB</td><td>データb</td></tr>
   <tr><td>CCC</td><td>データc</td></tr>
 </tbody>
</table>

本当は <col width="0*"> と指定すると
>当該グループにある各列の幅を、列内容を保持できる最小の幅にすることを意味する
らしいのだけど Mozilla しか正しく解釈しない様。


3:[回答] … [2004/03/08 20:03 ]

仕様書の URL 間違えた。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.2.4


4:[回答] q [2004/03/08 20:25 ]

回答有り難うございます。
<col style="width:3em">と左側の<td>をしてしまうと、3emで
改行が入ってしまいます。

>>0が適切な文章でなくてすいません。
左側の<td>内を改行せずに、首尾よくborderが引かれるような
形にできればと思っています。

<col>で幅を縮めてしまうと、white-space:nowraとやっても、
<td nowrap>としても改行が入ってしまいます。
<nobr>で囲むと希望どおりの表示にはなるのですが、将来仕様から
外されることが分かっているタグを使うのは止めたほうがいいと
思い他の方法を探しています。
やっぱり無理でしょうか?


5:[回答] … [2004/03/08 21:13 ]

>>4
自動的なテキスト折り返しを禁止するというより,
一列目のセルの内容量にあわせて列幅を指定すればよいのでは。
例では「AAA」とかが収まるように「3em」と指定したのですが。
em という単位で指定した意味わかっていますか?
「3em」というのは,現在のフォントサイズで3文字分という意味ですよ。

><nobr>で囲むと希望どおりの表示にはなるのですが、将来仕様から外される
というより,nobr という要素は MSIE や Netscape の独自拡張ですが。


6:[完了] q [2004/03/08 22:00 ]

有り難うございます。
emってフォントサイズで、っていうことなんですね。
htmlは動的に出力するためサイズで指定するような方法以外で
ないかなと思っていましたが、出力のたびに文字数を計算して
widthを指定すればいいのですね。

他に汎用的なものがあればと思ったのですが難しいようですね。
emでサイズ指定で行おうと思います。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World