Question

我有一个HTML表格，里面有一个单元格。该表根据单元格内的内容进行扩展。

我的问题是我希望表格保留正方形大小，这样如果宽度缩放，高度将按比例缩放。即使内容是文本，我也需要像图像缩放一样的功能。

Answer 1

这是一个例子

<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

上的演示页面

HTML表格高度＆amp;宽度尺寸按比例缩放

1 个答案: