Prevent <td> from expanding when inserting content

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>