Question

我有一个包含contenteditable = true单元格的表格。我希望在这些单元格中插入一个按钮，但问题是我可以将这些按钮退回去，我不希望这种情况发生。这就是我在做的事情：

<table><tr>
<td contenteditable=true>Text Here
<button>Don't delete me!</button>
</td>

我不想在单元格内创建两个跨距，一个可编辑，一个不可，因为我无法弄清楚如何填充整个单元格。

Answer 1

您可以将按钮分成另一个<td>。

＆＃13;

td {border: dashed 1px red}

＆＃13;

<table>
  <tr>
    <td contenteditable="true">Text Here
      <td contenteditable="false"><button>Don't delete me!</button></td>
      <td contenteditable="true">After button Text Delete me
    </td>
  </tr>
</table>

＆＃13;

Answer 2

除非您不关心它们被删除，否则不要在contenteditable的元素中嵌套任何元素。将contenteditable元素嵌套在<td>中，或将<button>置于<td>之外，并使用position:relative或transform:translate覆盖<td> 。这个片段演示了三种方式。第二个和第三个例子是脆弱的，可以轻易破解，第一个例子是最好和最简单的。

<强>段

＆＃13;

.ghost {
  position: relative;
  right: 150%;
  top: 14px;
}
.extended {
  position: relative;
  right: 12%;
  vertical-align: top;
}
.bg {
  position: relative;
  right: 170%;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.up {
  position: relative;
  right: 170%;
  z-index: 1;
}
button {
  display: block;
}
td {
  min-width: 210px;
}

＆＃13;

<table>
  <tr>
    <td>
      <label contenteditable=true>Example 1</label>
      <button>Don't delete me!</button>
    </td>
    <td class='extended' contenteditable=true>
      Example 2
    </td>
    <td>
      <button class='ghost'>Don't delete me!</button>
    </td>
    <td>
      <div class='bg' contenteditable=true>Example 3</div>
      <button class='up'>Don't delete me!</button>
    </td>
  </tr>
</table>

＆＃13;

Contenteditable仅编辑纯文本

2 个答案: