生成给定维度的表格

Question

我正在尝试生成一个表格，其中包含尽可能多的给定尺寸的方形单元格。困难的部分是，表格不能超过视口尺寸。表格的CSS如下：

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

它有一个 html 属性 cellSpacing = "1" 作为 border-spacing 非兼容浏览器的后备。现在，我的代码基于以下假设：

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

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

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

但是，问题在于它似乎无法正常工作。该表格似乎比在小分辨率上可能小一些，并且在高分辨率上变得有点太大并超过页面（我通过缩小页面进行了测试 - 这可能不是太准确的测试）。 - Live demonstration （cellSideLength 设置为 40px） - 您可以将页面缩小，例如在 Chromium 中查看表格如何超出页面.

这让我觉得我对如何确定 html 表的大小的假设可能有点偏差。如果有人有任何有用的建议，我会全力以赴。

Answer 1

获取视口宽度取决于浏览器。详情请见http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/。

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

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