0

単一のセルを含むHTMLテーブルがあります。テーブルは、セル内の内容に応じて展開されます。

私の問題は、テーブルに正方形のサイズを保持させたいので、幅が拡大縮小すると、高さが比例して拡大縮小することです。コンテンツがテキストであっても、画像スケーリングのような同じ機能が必要です。

4

1 に答える 1

3

ここに例があります

<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

于 2013-03-26T15:35:10.967 に答える