Svelte 中如何避免 td 切换为 input 时撑宽原有表格列宽

问题本质 #

当前交互实现出现页面跳动的核心原因是HTML表格默认采用table-layout: auto布局模式，列宽会随单元格内的内容尺寸实时动态调整。当单元格从纯文本切换为带默认边框、内边距的输入框时，内容占据的空间发生变化，就会触发浏览器重新计算全表列宽，造成页面位移。

核心配置 #

要实现初始渲染适配列宽、后续内容切换不改变列宽的效果，无需手动逐列计算宽度，仅需调整表格布局规则与元素默认样式即可：

• 给表格添加 table-layout: fixed 样式，强制浏览器在首次渲染时根据第一行单元格的内容确定所有列的最终宽度，后续单元格内容无论怎么变化，都不会反向修改已确定的列宽值。
• 对单元格内的输入框做样式重置，消除默认占位带来的尺寸偏移：
  • 给输入框设置box-sizing: border-box、width: 100%，让输入框完全适配当前单元格的可用宽度，不会超出边界撑大容器
  • 清除输入框默认的外边距、内边距、边框，避免默认样式额外占用空间
  • 让输入框继承单元格原文本的字体样式，避免内容切换时出现垂直方向的视觉错位
• 给单元格添加基础内边距，让文本、输入框和单元格边框保持舒适间距，避免内容贴边。

修改后完整代码 #

<script>
  const rows = 10
  const cols = 5
  let clickedRow = -1
  let clickedCol = -1

  function clicked(row, col) {
    clickedRow = row
    clickedCol = col
  }

  function clear() {
    clickedCol = -1
    clickedRow = -1
  }
</script>

<table>
    {#each Array(rows) as _, row}
        <tr>
            {#each Array(cols) as _, col}
                <td on:click={() => clicked(row, col)}>
                    {#if clickedRow === row && clickedCol === col}
                        <input type="text" value="Hello" />
                    {:else}
                        Hello {row}.{col}
                    {/if}
                </td>
            {/each}
        </tr>
    {/each}
</table>

<button on:click={clear}>Clear</button>

<style>
    table, tr, td {
        border: solid 1px;
        /* 核心配置：固定表格布局，锁定列宽 */
        table-layout: fixed;
        padding: 4px;
    }
    input {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        font: inherit;
    }
</style>

补充说明：使用table-layout: fixed模式时，表格总宽度默认占满父容器的全部可用空间，各列会自动按比例平分宽度；如果需要自定义特定列的宽度，只需要给第一行对应的单元格/表头设置明确的宽度值，整个表格的列宽就会按设定值固定，完全不受后续内容变化的影响。

内容的提问来源于stack exchange，提问作者Mike Hogan