WEB相談室

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

タイトル:<td>の幅を固定する方法。

0:[投稿] tuku [2005/07/22 18:24 ][環境:IE6, win2k apache]

以下のようにして、100pxの幅で<td>をとりたいのですが、ブラウザのサイズを小さくした
場合に自動的に幅が最適化されてしまい短くなってしまいます。

<table>に幅を指定すれば問題ないようなのですが、<td>の数は動的に変えながら出力
するので、できれば<table>に指定しない形で実現したいのですが可能でしょうか?


<table border="1">
    <colgroup>
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
        <col style="width:100px;" />
    </colgroup>
    <tbody>
        <tr>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
        </tr>
    </tbody>
</table>


1:[回答] レミー [2005/07/22 21:43 ]

1×1ドットの無色のGIF画像を用意して
それを100ドット×1ドットに伸張して
あげればOK。1x1 じゃなくても32x32 でも
なんでもOK。
<div>
<img src="1x1.gif" style="width:400px;height:1px">
<table border style="width:400px">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
</div>

こうすると400px 幅よりも窓サイズが小さくなると
横スクロールバーが出てきます。

無色透明のGIF画像が入手困難・作り方知らないなら
レイアウトが崩れないページを見つけて、そのページ
をダウンロードしてしまえば入手できますねw
良し悪しは別にして。


2:[回答] AC1号 [2005/07/23 23:42 ]

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#fixed-table-layout
を読めば分かりますが、
・固定レイアウトアルゴリズムを使うこと。
・固定レイアウトアルゴリズムの場合、表全体の幅は、表要素のwidth値と、列幅の合計のうち、大きい方となる。すなわち、表要素のwidth値が列幅の合計より小さくなるように設定すればよい。

つまり、table要素に以下のスタイルを設定すればよいのです。
<style type="text/css">
table {
table-layout:fixed;
width:0;
}
</style>
widthを0にしてもCSS2を正しく理解するブラウザでは意図通りにレンダリングされるはずです。
WinIE6,Firefox,Safariでは正しくレンダリングされますが、MacIE(5)では意図した通りに表示されません(バグ)。そのため、table要素に指定するwidthは最小の列数での幅を超えない程度の長さを指定した方がよいでしょう。


3:[完了] tuku [2005/07/24 18:49 ]

>>1 有難う御座います。

>>2 有難う御座います。
table-layout:fixed ですか。すっかり忘れてました。
言われないと一生思い出さなかったかも(>_<)

とりあえず、対象はwinのIE6なのでこれで大丈夫です。

助かりました。有難う御座います。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World