Prevent <td> from expanding when inserting content - html

Question

I have a table of fixed width and height containing three rows and columns. Rows and columns are automatically equal size, but when I put innerHTML (or image) into table cell, cell with text inside expands at the cost of other columns. How to prevent table cells from expanding after inserting content inside? I've tried solutions from similar stack overflow questions, but nothing worked.
JS fiddle: https://jsfiddle.net/m20akmdx/14/
document.getElementById('8').innerHTML = 'R';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

Answer 1

Try using fixed table layout.
table {
table-layout: fixed;
...
}
And adding a no-break space into each cell.
td:after {
content: "\00A0";
}
document.getElementById('8').innerHTML = 'R';
table {
table-layout: fixed;
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
td:after {
content: "\00A0";
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

Answer 2

Set the width and height of the td elements rather than a width and height for the table and you will get the desired behaviour.
document.getElementById('8').innerHTML = 'Raaaa';
table{
border: 1px solid black;
border-collapse: collapse;
}
td{
width:120px;
height:120px;
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

Answer 3

set a max-width
td{
border: 1px solid black;
text-align: center;
max-width: 200px;
}
or
td{
border: 1px solid black;
text-align: center;
max-width: 30%;
}

Answer 4

You will need to specify the td width, and maybe the height as well:
https://jsfiddle.net/m20akmdx/23/
document.getElementById('8').innerHTML = 'my long text gets wrapped';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: calc(100% / 3);
height: calc(100% / 3);
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>