插入内容时防止扩展

Question

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

JS小提琴：https://jsfiddle.net/m20akmdx/14/

＆＃13;

＆＃13;

document.getElementById('8').innerHTML = 'R';

＆＃13;

table {
  width: 360px;
  height: 360px;
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  text-align: center;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

设置td元素的宽度和高度，而不是表格的宽度和高度，您将获得所需的行为。

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

设置最大宽度

td{
   border: 1px solid black;
   text-align: center;
   max-width: 200px;
}

或

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

Answer 4

您需要指定td宽度，也可以指定高度：

https://jsfiddle.net/m20akmdx/23/

＆＃13;

＆＃13;

document.getElementById('8').innerHTML = 'my long text gets wrapped';

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;