table 单元格内的 contenteditable div 是否可以保持其原始单元格尺寸？

Question

我正在 table 中创建一个 editable 单元格，但是尽管 overflow: auto css 在其中键入内容只会使它以一种非常尴尬的方式扩展。

如何使其保持初始单元格大小，并根据需要显示滚动条？最好这不需要为 width/height 设置像素值，因此整个 table 将在不同分辨率或放大和缩小（控制+鼠标滚轮）之间停留在屏幕上。

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
.table {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
cell {
  overflow: auto;
}

<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>

Answer 1

尝试使用 CSS-Grids 而不是 <table>，因为它们具有固定大小的能力，您可以完全按照您的要求进行操作。

开始使用它的好资源是：

注意：我知道我没有按原样回答问题，但每次有人使用 HTML 表格进行显示和对齐时，我都会尝试推送 CSS 网格，因为 CSS 应该改用。

Answer 2

您可以使用 <textarea> 而不是将 <div> 与 contenteditable="true" 一起使用，它会在文本超出边界时显示滚动条，如下所示。

提示：使用 <textarea>，您可以增加默认可见的行数。

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
.table {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
cell {
  overflow: auto;
}

<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>
      <textarea id="w3review" name="w3review" rows="3" cols="50">Editable Text.</textarea>
    </td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

table 单元格内的 contenteditable div 是否可以保持其原始单元格尺寸？

Is it possible to have a contenteditable div inside a table cell stick to its original cell dimensions?

html

css

html-table

contenteditable