I have tried the solution suggest in Make table cells square and it didn't work, it made the cells take up almost an entire screen each. I also tried the solution in Grid of responsive squares and it also didn't work.
Here is my code:
var gridHTML = "<table>";
for (let i = 0; i < 9; i++) {
gridHTML = gridHTML + "<tr>";
for (let j = 0; j < 9; j++) {
let id = "cell" + i + j;
gridHTML = gridHTML + "<td id=" + id + "><br></td>";
}
gridHTML = gridHTML + "</tr>";
}
gridHTML = gridHTML + "</table>";
$("#grid").html(gridHTML);
$("td").hover(function() {
if (($(this).html() == "") || ($(this).html() == "<br>")) {
$(this).css("background-color", "lightgrey");
}
}, function() {
if (($(this).html() == "") || ($(this).html() == "<br>")) {
$(this).css("background-color", "white");
}
});table {
table-layout: fixed;
border-collapse: collapse;
width: 30%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
table,
th,
td {
border: 1px solid black;
font-size: larger;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<body style="text-align: center; line-height: 200%">
<div id="grid"></div><br>
</body>There's a lot of junk in the style tag because I don't know what I'm doing. This code works perfectly to make a grid of square cells when viewed on my laptop but on my desktop the cells are rectangular.
