Warum entspricht die Höhe des Divs nicht der Summe der Tabellenzellhöhen, obwohl sie bei der Konsole gleich vergleichbar ⇐ CSS

[Anonymous]

Ich versuche, eine Tabelle dynamisch zu konstruieren, wobei eine Größe durch die Strombreite des Browserfensters bestimmt wird. Dies funktioniert perfekt für die Breite, aber nicht für die Höhe. Die letzte Zellreihe scheint die Unterseite des DIV um eine fraktionelle Menge zu überlagen. Das Bild stimmt jedoch nicht überein, obwohl die Mathematik wie erwartet funktioniert. < /P>
Was verursacht die Diskrepanz zwischen den berechneten und angezeigten Höhen?

Code: Select all

const pageWidth = document.documentElement.scrollWidth;
const nRows = 10; const nColumns = 10;
const tableDiv = document.getElementById("tableDiv");
tableDiv.style.width = 0.7*pageWidth + "px";
tableDiv.style.height = 0.7*pageWidth + "px";
tableDiv.style.backgroundColor = "yellow";

// Dynamically generate a table of the specified dimensions
function constructTable(nR, nC) {
const tbl = document.createElement("table"); tbl.id = "test table";
var tRow; var tCell;
for (let r = 0; r < nR; r++) { // Use 'let,' not 'var,' or else all row/column numbers will be set to the final (maximum) values of r and c
tRow = document.createElement("tr");
tbl.appendChild(tRow);
for (let c = 0; c < nC; c++) {
tCell = document.createElement("td"); tCell.className = "testing"; tRow.appendChild(tCell);
}
}
return tbl;
}

function showTable(t) {
tableDiv.innerHTML = "";
tableDiv.appendChild(t);
const dynamicSizeCells = document.getElementsByClassName("testing");
for (var i = 0; i < dynamicSizeCells.length; i++) {
dynamicSizeCells[i].style.width = 0.7*pageWidth/nColumns + "px";
dynamicSizeCells[i].style.height = 0.7*pageWidth/nRows + "px";
dynamicSizeCells[i].style.backgroundColor = "green";
}
console.warn("Div width is " + tableDiv.style.width + ", div height is " + tableDiv.style.height + "; cell width is " + dynamicSizeCells[0].style.width + ", cell height is " + dynamicSizeCells[0].style.height);
}

const theTable = constructTable(nRows, nColumns);
showTable(theTable);< /code>
body {
background-color: darkblue;
}
#tableDiv {
margin-left: 15%;
margin-top: 5%;
}
.testing {
background-color: "green";
}< /code>