title: Prevent <td> from expanding when inserting content
body: <p>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 <code>innerHTML</code> (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.</p>
  
  <p>JS fiddle: <a href="https://jsfiddle.net/m20akmdx/14/" rel="nofollow noreferrer">https://jsfiddle.net/m20akmdx/14/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('8').innerHTML = 'R';</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    width: 360px;
    height: 360px;
    border: 1px solid black;
    border-collapse: collapse;
  }
  
  td {
    border: 1px solid black;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="table"&gt;
    &lt;tr&gt;
      &lt;td id="1"&gt;&lt;/td&gt;
      &lt;td id="2"&gt;&lt;/td&gt;
      &lt;td id="3"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="4"&gt;&lt;/td&gt;
      &lt;td id="5"&gt;&lt;/td&gt;
      &lt;td id="6"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="7"&gt;&lt;/td&gt;
      &lt;td id="8"&gt;&lt;/td&gt;
      &lt;td id="9"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>