插入内容时防止<td>扩展

Question

我有一个固定宽度和高度的表,包含三行和三列.行和列的大小自动相等,但是当我将innerHTML(或图像)放入表格单元格时,内部文本的单元格会以其他列的成本展开.内容插入后如何防止表格单元格扩展？我尝试过类似堆栈溢出问题的解决方案,但没有任何效果.

JS小提琴: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

尝试使用固定表格布局.

table {
  table-layout: fixed;
  ...
}

并在每个单元格中添加一个不间断的空间.

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>