可調整表格與方格

我正在寫一個簡單的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%; 
}

來源

2014-09-02 supergiox

在你的函數你已經知道你有多少行有，所以

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

來源

2014-09-02 20:48:18 aahhaa

可調整表格與方格

回答

相關問題