HTML dynamic table - stop expand height when insert text - html

Question

I've dynamic table with fixed width and height. Using random function I get numbers of cells (3x3 - 7x7). Table is rendering well. On each cell I've click event which write one letter to pointed cell. There a problem, because row is expanding on height. How to stop it?
https://codepen.io/anon/pen/PdrNVM
let table = document.getElementById('table');
let tableSize = Math.floor((Math.random() * 5) + 3);
console.log(tableSize);
for (i = 0; i < tableSize; i++) {
let tr = document.createElement('tr');
for (j = 0; j < tableSize; j++) {
let td = document.createElement('td');
let content = document.createTextNode('');
td.appendChild(content);
tr.appendChild(td);
}
table.appendChild(tr);
}
let tds = document.querySelectorAll("td");
tds.forEach((td) => {
td.addEventListener("click", function() {
td.innerHTML = 'p';
});
});
table {
width: 200 px;
height: 200 px;
table-layout: fixed;
}
td {
background-color: green;
}
<h2>Click in cell</h2>
<table id='table'></table>

Answer 1

Just set a proper height and max-height like:
td {
background-color: green;
height: 50px;
max-height: 50px;
}

Answer 2

Set a fixed height for the tds. You don't need use the height for the table, let the child td make up the height.
table {
width: 200px;
table-layout: fixed;
}
td {
height: 60px;
background-color: green;
}