生成给定尺寸的表格

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

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

而且它有一个HTML属性CELLSPACING =“1”作为边框间距非compilant浏览器的回退。现在，我的代码是基于以下假设：

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))

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

这让我想，也许我对HTML表格的大小是如何确定的假设有点关闭。如果任何人有任何有用的建议，我都耳熟能详。

来源

2011-04-30 Witiko

获取ViewPort宽度取决于浏览器。有关更多详细信息，请参见http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/。

此外，在CSS3单位“大众”（视宽）可用于：

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

来源

2011-04-30 11:15:40

嗯，我用我自己的lib中获得视口尺寸和它似乎工作得很好，所以这不是问题。 :-)另外我在我的代码中使用了Math.floor（），如OP所示 - >表将与视口一样大或更小（或者至少这是计划，它不完全工作 - 请参阅OP ），所以在CSS中对表格的宽度进行硬编码没有意义。但我不知道CSS3中的vw单元，谢谢你提出这个问题。 :-) – Witiko 2011-04-30 11:43:31

生成给定尺寸的表格

回答

相关问题