How do I set the height of every td element to it's width?

Question

I have a table with the width 100%. It has seven columns that divide up the width equally. All I want to do is to have the height of a td element be equal to it's dynamic width.

Any ideas? jquery is fine

table { width: 100%;}

Answer 1

You can try following code:

$( window ).resize(function() {
  $('table>tr').height($('table>td').width());
});

But. It is batter to do it with CSS. Because redraw using javascript is expensive computation.

Answer 2

Try ...

var w = $("table td").width() + "px";
$("table td").css({ height: w });