具有方形单元格的可调整大小的表

Resizable table with squared cells

本文关键字：可调整 方形 单元格      更新时间：2023-09-26

我正在写一个简单的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%;
}

在函数中，您已经知道有多少行，因此

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