如何使HTML表格高度与其宽度成正比？

Question

我有一个HTML表格，在许多单元格中显示各种背景图像。该表需要响应，因此我将其宽度设置为100％。但是，我需要桌子的高度与其宽度成比例。比如说宽度的30％。

我已经尝试过用于div的填充技巧，但它在这里不起作用。有CSS或JavaScript / jQuery解决方案吗？

Answer 1

您可以使用jQuery执行此操作（在呈现文档时只需一个选项，您可以获得表格和高度的宽度为表格的30％）

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