action

web技

■列幅の固定化■
※1列目は列幅固定/2列目が列幅可変
※1列目を一括してwidth指定しています([技c008]が、2列目は幅は指定していません。
※ウィンドウサイズが変更されても、2列目だけが可変で1列目は幅が変わりません。
※幅指定していない列はウィンドウサイズが変わると幅も追従して変わります。

-----次の行から(copy)-----
<<table border="1" width="100%">
<!--☆列の一括書式指定[c008]/1列目のみwidth指定するが2列目は指定しない(指定しない列はウィンドウに可変)-->
　<colgroup width="200" valign="middle" align="center"></colgroup>
　<colgroup valign="middle"></colgroup>
<tr>
<td align="center" onmouseover="MouseOver(this,13)" onmouseout="MouseOver(this,99)">
　<a href="javascript:winResize(800,700)">ウィンドウ(800W×700H)</a></td>
<td>ウィンドウの幅を800W×700Hに変更します。</td>
</tr>
<tr>
<td align="center" onmouseover="MouseOver(this,13)" onmouseout="MouseOver(this,99)">
　<a href="javascript:winResize(600,400)">ウィンドウ(600W×400H)</a></td>
<td>ウィンドウの幅を800W×700Hに変更します。</td>
</tr>
<tr>
<td align="center" onmouseover="MouseOver(this,13)" onmouseout="MouseOver(this,99)">
　<a href="javascript:winMax()">ウィンドウ(フルスクリーン)</a></td>
<td>ウィンドウの幅を、使用中のパソコンの画面の大きさに合わせて全画面(フルスクリーン)表示に変更します。</td>
</tr>
</table>
-----上の行まで(copy)-----

◆テーブルの幅をウィンドウサイズに追従して変化させるとき、特定列のみ列幅を固定させておきたい時の技です。
◆列数が3列以上の場合は、自分で工夫してみて下さい。

◆要点
※表幅をウィンドウ幅の100%にする <table width="100%">
※幅を固定する列の列幅をピクセルで指定する <colgroup width="200">
※幅を可変にする列幅には列幅指定しない

【関連技】
◆[技c004]テーブル(表)を作る
※テーブル幅をウィンドウサイズに追従させるとき
◆[技c008]テーブルの列の書式を一括で設定する
◆[技k005]ウィンドウをオープンしたときウィンドウのサイズを変える
※本技で使用しているウィンドウサイズ変更のスクリプトは[技k005]をそのまま使用しています。

◇table◇width

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----