Сгенерированная таблица создает не квадратные таблицы ячейки ⇐ Html

[Anonymous]

Я пытаюсь построить таблицу динамически, с размером, определяемым током шириной окна браузера. Это отлично работает для ширины, но не для высоты. Последний ряд ячеек, по -видимому, предназначен для дна div на дробное количество. Тем не менее, визуальное значение не соответствует, даже если математика работает, как и ожидалось.

Код: Выделить всё

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>

Подробнее здесь: https://stackoverflow.com/questions/795 ... able-cells