Javascript 生成给定维度的表

我试图生成一个由给定维度的最大可能数量的正方形单元格组成的表。困难的部分是，表格不得超过视口尺寸。该表的CSS如下所示：

.gameField {
  table-layout: fixed;
  position:  absolute;
  top: 0px; left: 0px;
  border-spacing: 1px 1px;
}

并且它有一个html属性cellspacting=“1”，作为边框间距非编译浏览器的后备。现在，我的代码基于以下假设：

viewPortWidth  = numberOfColumns * cellSideLength + (numberOfColumns + 1)
viewPortHeight = numberOfRows    * cellSideLength + (numberOfRows    + 1)

为了解释一下背后的逻辑，表的边长总是由单元格数*边长+边框组成。而且总是比行/列的数量多一个边框，因此（numberOfColumns或rows+1）。将其视为一个数学方程，我们知道cellSideLength和视口尺寸，可以轻松计算行数和列数：

numberOfColumns = Math.floor( (viewportWidth  - 1) / (cellSideLength + 1) )
numberOfRows    = Math.floor( (viewportHeight - 1) / (cellSideLength + 1) )

然而，问题是它似乎不能正常工作。该表似乎比小分辨率下的表小了一点，而高分辨率下的表太大了一点，超出了页面（我通过缩小页面进行了测试，这可能不是一个太准确的测试）（cellSideLength设置为40px）-您可以缩小页面，例如在Chromium中，查看表格如何超出页面

---

这让我想到，我关于如何确定html表大小的假设可能有点偏离了。如果有人有什么有用的建议，我洗耳恭听。

获取视口宽度取决于浏览器。有关更多详细信息，请参阅

此外，在CSS3中，可以使用单位“vw”（视口宽度）：

 .gameField { table-layout: fixed; width: 1vw }

---

嗯，我使用我自己的库来获取视口尺寸，它似乎工作得很好，所以这不是问题所在。：-）此外，我在代码中使用Math.floor（），如OP->中所示，表格将与视口一样大或更小（或者至少这是计划，它不完全起作用-请参见OP），因此在CSS中硬编码表格的宽度没有意义。但我不知道CSS3中的大众汽车部门，谢谢你提出这一点。：-）