如何让表格单元格内的contenteditable div保持原始尺寸且无需固定像素宽高

安全阿岳

2026-9-23

可编辑表格单元格防撑开解决方案

核心修复点

修正CSS类选择器错误，将原代码中的标签选择器cell改为类选择器.cell
给表格添加table-layout: fixed属性，强制表格使用固定布局，列宽按表头比例自动分配，不会随内容动态撑开
给td、th添加溢出隐藏规则，限制单元格本身的最大尺寸
给可编辑的.cell元素设置宽高100%继承单元格尺寸，添加min-width: 0、min-height: 0取消浏览器默认的最小内容尺寸限制，同时配置换行规则避免长内容强制撑宽

完整修改后代码

CSS代码

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
.table {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  /* 核心：固定表格布局，列宽按表头比例分配，不随内容变化 */
  table-layout: fixed;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  /* 限制单元格本身不被内容撑开 */
  overflow: hidden;
}
.cell {
  /* 继承单元格的宽高 */
  width: 100%;
  height: 100%;
  /* 内容溢出显示滚动条 */
  overflow: auto;
  /* 取消浏览器默认最小内容尺寸限制，避免撑破父级 */
  min-width: 0;
  min-height: 0;
  /* 长内容自动换行，避免长字符串撑宽 */
  word-break: break-all;
  white-space: pre-wrap;
  /* 可选：去掉聚焦时的默认外边框 */
  outline: none;
}

HTML代码（无需修改）

<table class="table">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>
      <div contenteditable="true" class="cell">Editable cell</div>
    </td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>