是否可以让表格单元格内的内容可编辑 div 保持其原始单元格尺寸？

Posted 2023-03-06

【中文标题】是否可以让表格单元格内的内容可编辑 div 保持其原始单元格尺寸？

【英文标题】：Is it possible to have a contenteditable div inside a table cell stick to its original cell dimensions?

【发布时间】：2022-01-12 11:02:29

【问题描述】：

我正在表格中创建一个可编辑的单元格，但是尽管在其中输入overflow: auto css 只会使它以一种非常尴尬的方式展开。

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

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>

【参考方案1】：

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

好的资源是：

Grid Garden CSS-Tricks MDN

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

【讨论】：

这可能没问题，直到最终用户询问为什么不能将表格（部分）复制并粘贴到电子表格或文本文档中

【参考方案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>