テーブルの幅をブラウザの幅(内側)に合わせる

このページをソーシャルブックマークしてみんなに紹介する！ -->

テーブルの幅をブラウザの幅(内側)に合わせる

テーブルの幅をブラウザの幅(内側)に合わせる場合、<table width="100%"> とします。
しかしブラウザのサイズが変更されてもテーブルの幅はそれに合わせて変わることはありません。
テーブルタグを利用してデザインをしている場合は、ブラウザのサイズが変更されてもそれに合わせてテーブルの幅も変更したい場合があります。
そのような時はこのスクリプトを利用すると実現できます。

＜スクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* 機　能：ブラウザサイズリサイズ処理
* 引　数：なし
* 戻り値：なし
****************************************************************/
function refresh() {
TableWidth('tb');
}
window.onresize = refresh;
//-->
</script>

上記スクリプトを <head></head> の間に記述します。
11行目の window.onresize = refresh; で、ブラウザのサイズが変更された時にファンクション refresh() が呼ばれます。
9行目の関数で後述の関数を呼び、サイズを変更します。
引数で幅を変更するデーブルのIDを渡します。（'tb' はテーブルのID名です）

＜幅を変更するスクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* 機　能：テーブルの幅をブラウザの幅(内側)に合わせる
* 引　数： ch テーブル名
* 戻り値：なし
****************************************************************/
function TableWidth(ch){
var pWidth=null;
//NN用
if(document.layers || document.getElementById) pWidth=window.innerWidth-20;
//IE用
if(document.all) pWidth=document.body.clientWidth-1;
var obj = document.all && document.all(ch) || document.getElementById && document.getElementById(ch);
obj.width = pWidth;
}
//-->
</script>

引数で渡されたオブジェクト（この場合はテーブル）の幅を変更するスクリプトです。

＜高さを変更するスクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* 機　能：テーブルの高さをブラウザの高さ(内側)に合わせる
* 引　数：引数： ch テーブル名
* 戻り値：なし
****************************************************************/
function TableHeight(ch){
var pHeight=null;
//NN用
if(document.layers) pHeight=window.innerHeight;
//IE用
if(document.all) pHeight=document.body.clientHeight;
var obj = document.all && document.all(ch) || document.getElementById && document.getElementById(ch);
obj.height = pHeight;
}
//-->
</script>

実際には使用しないと思いますが、参考までに高さを変更するスクリプトです。

＜テーブル＞

<table id="tb" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">○○○○○</td>
</tr>
</table>
<script language="javascript1.2">TableWidth('tb');</script>

テーブルに id 名をつけ、引数として渡します。
1行目のテーブルタグで指定します。
6行目でテーブルの幅を変更するスクリプトを記述しています。
テーブルの幅指定で width="100%" としても良いのですが、
リサイズ時に変更したサイズに合わせるために同じ関数を呼んでいます。
また、このスクリプトはテーブルより下の行に書かないとエラーになります。
（テーブルがブラウザに読み込まれた後に実行するようにするため）

スポンサードリンク

< 戻る