単一のセルを含むHTMLテーブルがあります。テーブルは、セル内の内容に応じて展開されます。
私の問題は、テーブルに正方形のサイズを保持させたいので、幅が拡大縮小すると、高さが比例して拡大縮小することです。コンテンツがテキストであっても、画像スケーリングのような同じ機能が必要です。
ここに例があります
<body onLoad="tableSquare('table1');">
<table class="square" id="table1" >
<tr>
<td>lalalalalallc sald;asd;l</td>
<td>gf sdfgds gdsf gdsfg dfg dfg</td>
<td>dfg dfgdf gxcvxcvxcvxcvxcvxcvxc jhkvxcvxcvdfgdfgdf gdfg</td>
</tr>
<tr>
<td>dfg dfgdfg dfgdfg</td>
<td>dfg dfgdf </td>
<td></td>
</tr>
</table>
</body>
スタイル
.square{
background-color:#cfcfcf;
width:100px;
height:100px;
}
Javascript関数
function tableSquare(tableName){
var t = document.getElementById(tableName);
var max_size = Math.max(t.offsetWidth,t.offsetHeight);
t.style.width = max_size+"px";
t.style.height = max_size+"px";
}
JSBINのデモページ http://jsbin.com/ivepak/1/edit