带有方形单元格的可调整大小的表格答案

【问题标题】：Resizable table with squared cells带有方形单元格的可调整大小的表格
【发布时间】：2014-09-03 23:56:06
【问题描述】：

我正在编写一个简单的基于 javascript 的游戏，并且我有一个（不开心？）想法，即使用一个大的 html 表格来绘制游戏场景（一个“像素”是一个单元格）。

由于游戏必须在多个屏幕分辨率的主要浏览器上运行，但“网格”大小（单元格数）始终相同，我想将表格宽度设置为页面宽度的百分比。此外，由于表很大（35 x 70），我动态生成它。这样一切正常，但每个表格单元格（显然）都是矩形，而不是正方形。

所以问题是：考虑到在运行时已知宽度，将每个 <td> 元素的高度设置为与宽度相同的最佳方法是什么？

这些是感兴趣的代码：

HTML：

<body>
    ...
    <div id="container"></div>
    ...
</body>

Javascript：

$("#container").html(createGrid(gridX,gridY));

function createGrid(row,col){
    var table="<table id='grid'>\n";
    for(i=0; i<row; i++){
        table+="<tr>"

    for(j=0; j<col; j++)
        table+="<td></td>"

    table+="</tr>\n";
    }
    table+="</table>";

    return table;
}

CSS：

#grid{
 position: relative;
 margin-left: auto ;
 margin-right: auto;
 border-collapse: collapse;
 width: 90%;
}

【问题讨论】：

标签： javascript jquery html css html-table

【解决方案1】：

在你的函数中你已经知道你有多少行了，所以

var winWidth = $(window).innerWidth(); //your window width
var gridWidth = winWidth/row; // each row width size
var heightWidth = $('tr').height(gridWidth); // set height

【讨论】：