CODEWITHSUNDEEP
htmlcss
user1615362
user1615362

Reputation: 3807

HTML table height & width size scaling proportionately

I have an HTML table with a single cell in it. The table expands according to the content inside the cell.

My problem is that I want the table to preserve a square size, so that if the width scales, the height will scale proportionally. I need the same functionality like image scaling even though the content is text.

Upvotes: 0

Views: 4627

Answers (1)

Natalia
Natalia

Reputation: 470

here is an example

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

Style

.square{
  background-color:#cfcfcf;
  width:100px;
  height:100px;
}

Javascript Function

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";
}

Demo page on JSBIN http://jsbin.com/ivepak/1/edit

Upvotes: 3

Related Questions