How to make HTML table height proportional to its width?

Question

I have an HTML table displaying various background images in a number of cells. The table needs to be responsive, so I've set its width to be 100%. However, I need the table's height to be proportionate to its width. Say for example 30% of its width.

I've tried the padding trick used for divs but it doesn't work here. Is there a CSS or JavaScript/jQuery solution?

You can check this out. http://stackoverflow.com/questions/11535827/responsive-height-proportional-to-width — Aakash Aggarwal, Jun 10 '15 at 09:53

score 1 · Accepted Answer · answered Jun 10 '15 at 10:11

You can do this with jQuery (Just an option for you while rendering your document, you can get width of table and height as 30% of table)

$(document).ready(function(){
    var tablewidth = $('#tableid').width();
    var tableHeight = parseInt(tablewidth)*(30/100);
    $('#tableid').css('height',tableHeight+'px');
});

How to make HTML table height proportional to its width?

1 Answers1