Warum ist die Tischhöhe größer als die Summe der Zellen?

Question

Ich weiß nicht, ob meine Frage einfach oder naiv ist, aber ich lerne immer noch Javascript, also sei nachsichtig mit mir.

Eine meiner Übungen bestand darin, ein DIV-Element mit einer bestimmten Breite und Höhe zu erstellen, und dann versuchte ich mithilfe von Javascript eine Tabelle in diesem DIV zu generieren. Ich dachte, dass dies ein einfaches Problem ist, nehmen Sie einfach div Breite und Höhe Elternteil und dividieren Sie es durch die Anzahl der Spalten und Zeilen. Was ich gefunden habe ist, dass dies in horizontaler Richtung gut funktioniert, aber in vertikaler Richtung ist die Tischhöhe größer als die Summe der Zellen.

Lassen Sie uns sagen, dass div Höhe 407px ist. Dies bedeutet, dass die Zellenhöhe (15 Zeilen vorausgesetzt) ​​27,13 px betragen sollte. Die Gesamthöhe des Tisches sollte 15 * 27,13 = 407px betragen. Aber table.clientWidth gibt mir 420px in Chrom und 453px in IE10.

Ich dachte über Grenzen, die berücksichtigt werden können, aber warum dann bekomme ich richtige Breite? Ich habe versucht, getComputedStyle() Methode statt element.clientWidth zu verwenden, aber die Ergebnisse waren die gleichen. Dann habe ich über logische oder physikalische Pixel gelesen, aber das war nicht hilfreich. Ich verstehe nicht, warum sich dieser Code so verhält? Was ich vermisse?

Mein HTML

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

Mein 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

legte die Höhe der Zeile anstelle der Zelle:

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

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

Answer 2

Dies ist in der Tat auf die an die Größe Ihrer divs Zugabe border bezogen. Ich schlage vor, Sie werfen einen Blick auf die css-Eigenschaft box-sizing, am meisten seine border-box Wert. Dies passt die Größe an den Rahmen an, den Sie festgelegt haben.

Fügen Sie es Ihrer Zelle wie folgt hinzu: cell.style['box-sizing'] = 'border-box'; und Sie werden ein völlig anderes Ergebnis sehen. Die Höhe der Zelle sollte jetzt die Grenze berücksichtigen, die Sie darauf festgelegt haben. Und damit die Zellen auf die Gesamthöhe Ihres Tisches passen.

Sie können weitere Informationen zu der Grenze und dem Box-Modell here finden.

Answer 3

Die tatsächliche Höhe der Tabelle ist: 21px * 20 Zellen + 21px (die Grenzen) = 441px. Sie haben den Wert 21px für die Rahmen, da Sie border-collapse: collapse; für die Tabelle hinzugefügt haben. Ohne dies ist die Höhe 502px.