var grid = document.getElementById("grid");
var size = 50;
for (var y = 0; y < size; y++) {
var currentRow = grid.insertRow(0);
for (var x = 0; x < size; x++) {
var currentCell = currentRow.insertCell(-1);
currentCell.style.height = currentCell.style.width = `calc(100vh / ${size})`;
currentCell.style.backgroundColor = (x+y)%2 == 0 ? "Blue" : "Red";
}
}body {
margin: 0;
}
table#grid {
border-collapse: collapse;
height:100%;
}<html>
<body>
<table id="grid" align="center"></table>
</body>
</html>Seeking a solution for creating a table that perfectly fits the height of the screen with squared cells, the current approach using hidden images only provides cell squares that are almost perfect. Avoiding the use of absolute spacing, the goal is to achieve the desired result solely using CSS and JavaScript. The table size will be dynamic at runtime, but for this example, let's consider a 2 by 2 grid:
<table>
<tr>
<td><img src='placeholder.png'></td>
<td><img src='placeholder.png'></td>
</tr>
<tr>
<td><img src='placeholder.png'></td>
<td><img src='placeholder.png'></td>
</tr>
</table>
Corresponding CSS for the layout:
table {
height: 100%;
}
img {
height: 100%;
width: auto;
visibility: hidden
}
Any simple ideas to achieve this without excessive complexity are greatly welcomed.