如何使 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');
});