Question

我不知道我的问题是简单还是天真，但我仍然在学习javascript，所以请对我宽容。

我的一个练习是创建一个具有特定宽度和高度的DIV元素，然后使用javascript我试图在这个DIV中生成表格。我认为这是一个简单的问题，只需将父div宽度和高度除以列数和行数即可。我发现在水平方向上这种方法很好，但在垂直方向上，桌面高度大于单元格高度的总和。

假设div高度为407px。这意味着单元格高度（假设15行）应为27,13px。表的总高度应为15 * 27,13 = 407px。但是table.clientWidth给了我420px的chrome和453px的IE10。

我想到了可以考虑的边界，但为什么我的宽度合适呢？我尝试使用getComputedStyle()方法代替element.clientWidth，但结果是相同的。然后我读到了逻辑与物理像素，但这没有用。我不明白为什么这段代码会以这种方式运行？我缺少什么？

我的HTML

<div id="container">
  <div id="target"></div>
</div>

我的JavaScript

var createGrid = function(rows, cols, appendToID){
  var appendTo = document.getElementById(appendToID); 
  var appendToWidth = appendTo.clientWidth;  
  var appendToHeight = appendTo.clientHeight;  
  var cellWidth = (appendToWidth-16)/cols;  
  var cellHeight = appendToHeight/rows;
  var table = document.createElement('table');  
  for(var i=1; i<=rows; i++){
    var row = document.createElement('tr');
    for(var j=1; j<=cols; j++){
      var cell = document.createElement('td');
      cell.style.background = 'white';
      cell.style.padding = '0px';
      cell.style.margin = '0px';
      cell.style.border = "1px solid blue";
      cell.style.width = cellWidth+"px";
      cell.style.height = cellHeight+"px";
      row.appendChild(cell);
      console.log("all ok");
    }    
    table.appendChild(row);    
  }
  table.style.borderCollapse = "collapse";
  table.style.border = '1px';
  appendTo.appendChild(table);
}
createGrid(15, 11, "target");

JSFiddle example

Answer 1

表格的实际高度为：21px * 20个单元格+ 21px（边框）= 441px。边框的值为21px，因为您为表添加了border-collapse: collapse;。没有它，高度为502px。

Answer 2

将高度放在行而不是单元格中：

row.style.height = cellHeight+"px";

https://jsfiddle.net/4h83tu2j/17/

Answer 3

这确实与border增加你的div的大小有关。我建议你看一下css-property box-sizing，特别是它的border-box值。这会调整与您在其上设置的边框相关的尺寸。

将其添加到您的单元格中：cell.style['box-sizing'] = 'border-box';，您会看到完全不同的结果。现在，单元格的高度应考虑您在其上设置的边框。从而使细胞适合您桌子的总高度。

您可以找到有关边框和方框模型here的更多信息。

为什么表高度大于单元格高度之和？

3 个答案: