如何在可编辑HTML表格的单个单元格中设置多可编辑值并保留中间固定文本

嘿，这问题很好解决！要让“às”稳稳待在单元格中间，同时前后还能自由输入内容，咱们可以把目标单元格拆成三个行内元素：两个可编辑的输入区域，加上中间固定的“às”文本。这样既能保证固定文本不被修改，视觉上又像是一个连贯的单元格。

修改后的完整代码 #

CSS 部分

table { 
  font-family: arial, sans-serif; 
  border-collapse: collapse; 
  width: 100%; 
}
td, th { 
  border: 1px solid #dddddd; 
  text-align: left; 
  padding: 8px; 
}
tr:nth-child(even) { 
  background-color: #dddddd; 
}
/* 固定文本的样式，可按需调整 */
.fixed-text {
  margin: 0 4px; /* 给前后留一点间距，更美观 */
  font-weight: bold; /* 可选：突出固定文本 */
}
/* 去掉可编辑区域的默认轮廓，优化视觉体验 */
.editable-span {
  outline: none;
}

HTML 部分

<table>
  <tr>
    <th>Days</th>
    <th>Work Schedule</th>
    <th>Rest and Meal Interval</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>
      <span class="editable-span" contenteditable="true"></span>
      <span class="fixed-text">às</span>
      <span class="editable-span" contenteditable="true"></span>
    </td>
    <td contenteditable='true'></td>
  </tr>
</table>

关键说明 #

• 我们把原来的单个可编辑单元格，拆成了两个可编辑的<span>和一个固定文本的<span>，它们默认是行内元素，会自动在同一行排列。
• 中间的.fixed-text没有设置contenteditable属性，所以用户无法修改它，完美固定“às”的位置。
• 给.fixed-text加了margin: 0 4px，让前后的输入内容和“às”之间有合适的间距，避免挤在一起。
• .editable-span去掉了默认的轮廓线，编辑时不会出现突兀的边框，体验更流畅。

你可以直接复制这段代码测试，点击前后的空白区域就能输入内容，中间的“às”会一直待在中间，完全符合你的需求！

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