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

Question

我不知道我的问题是简单还是幼稚，但我仍在学习 javascript，所以请宽待我。

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

假设 div 高度为 407px。这意味着单元格高度(假设 15 行)应为 27.13 像素。表格的总高度应该是15*27,13=407px。但是 table.clientWidth 在 chrome 中给了我 420px，在 IE10 中给了我 453px。

我考虑过可以考虑的边框，但为什么我得到正确的宽度？我尝试使用 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。