主页 / coding / 问题 / 79350342
Accepted
Seredniy
Asked: 2025-01-13 01:17:35 +0800 CST

如何使 contenteditable 尊重表格单元格的初始大小？

  • 772

我的表格有 3 个单元格：前两个单元格包含输入，第三个单元格包含我的contenteditable。每个单元格的宽度为33.333%。当我在输入框中输入文本并且文本溢出时，一切都正常 — 文本只是被隐藏，正如输入框所预期的那样。

但是，当我输入时contenteditable，它会拉伸单元格，而不是像输入那样“滚动”文本。

在此处输入图片描述

* {
  box-sizing: border-box;
}

table {
  width: 100%;
}

td {
  width: 33.333333%;
}

input {
  width: 100%;
  height: 32px;
  border: 1px solid #dedede;
}

.contendeditable {
  padding-left: 10px;
  height: 32px;
  border: 1px solid red;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 32px;
}
<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td>
      <div class="contendeditable" contenteditable="true"></div>
    </td>
  </tr>
</table>

这是 jsfiddle：https://jsfiddle.net/zvm0exdc/14/

html

1 个回答

  1. Best Answer

    默认情况下，表格遵循“自动”布局。此布局会根据输入调整列的大小。这会导致不遵守您的宽度，并且永远不会应用溢出，因为它被视为有效布局。

    table-layout: fixed当您希望在内容发生改变时遵守规则时，您需要在表格的 CSS 上指定添加内容。

    table {
  width: 100%;
  table-layout: fixed
}


    * {
  box-sizing: border-box;
}

table {
  width: 100%;
  table-layout: fixed;
}

td {
  width: 33.333333%;
}

input {
  width: 100%;
  height: 32px;
  border: 1px solid #dedede;
}

.contendeditable {
  padding-left: 10px;
  height: 32px;
  border: 1px solid red;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 32px;
}
    <table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td>
      <div class="contendeditable" contenteditable="true"></div>
    </td>
  </tr>
</table>

    • 4

相关问题