HTML表格如何让单元格内嵌套元素固定右上角且左侧可正常输入

你可以通过父容器相对定位+子标签绝对定位+预留内边距的方式满足所有需求，修改后的代码如下：

修改后CSS代码 #

.plannerBox {
    outline: 2px solid black;
    /* 改为正常换行，支持内容溢出后向下撑高单元格 */
    white-space: normal;
    /* 开启相对定位，作为内部标签的定位锚点 */
    position: relative;
    /* 右侧预留足够空间放Homework标签，避免内容覆盖标签，可根据标签宽度调整数值 */
    padding-right: 80px;
    /* 设为border-box避免内边距撑大单元格原始宽度 */
    box-sizing: border-box;
    /* 可选：设置最小高度，避免空内容时单元格太窄 */
    min-height: 40px;
}
.homeworkCategory {
    color: white;
    background-color: gray;
    outline: 2px solid black;
    /* 绝对定位固定在右上角 */
    position: absolute;
    top: 0;
    right: 0;
    /* 加内边距让标签更美观 */
    padding: 2px 6px;
    /* 禁止选中和编辑，避免用户误删 */
    user-select: none;
    contenteditable: false;
}

修改后HTML代码 #

<head>
    <meta charset='utf-8'>
    <title>Planner - My Digital Planner</title>
</head>
<body>
<table>
  <tr>
    <td class="plannerBox" id="iR2C2" contenteditable="true" placeholder="Work goes here.">
      <span class="homeworkCategory">Homework</span>
      text would go here, and here, and here aswell
    </td>
  </tr>
</table>

实现效果说明 #

• 所有内容自带换行逻辑，超出单元格宽度后自动换行，单元格高度随内容动态向下扩展
• Homework标签始终固定在单元格右上角，不会随输入内容的增减发生移位
• 单元格右侧预留的内边距会限制输入内容的排布范围，不会出现文本覆盖标签的问题
• 标签设置了禁止编辑和选中，避免用户输入时误操作删除标签

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