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 回答