填充文本时，MatTable 宽度会扩展而不是溢出

【问题标题】：MatTable width extends instead of overflowing when filled with text填充文本时，MatTable 宽度会扩展而不是溢出
【发布时间】：2020-11-26 00:42:37
【问题描述】：

我有一个包含两列的表格，每列中有两个可编辑的 div。我希望能够编辑单元格并添加文本，直到可编辑 div 变为单元格宽度为止，此时我希望 div 然后溢出并显示溢出文本的省略号。

如果我使用 px 将 max-width 添加到可编辑的 div 中，我会得到我想要的行为，但我希望能够使用 % 来代替，以便设计保持响应性，因此 px 是不可能的。

正如您在 stackblitz 上看到的那样，如果我添加到可编辑的 div 并且它溢出了表格的其他列，则会被推送。我希望表格的宽度保持固定，列的宽度也固定。

我尝试设置一堆宽度，但似乎没有任何效果可以保持每列的宽度固定。

【问题讨论】：

【解决方案1】：

Html 表格有一个名为table-layout 的样式属性，默认设置为“自动”。如果将其设置为“固定”，则表格布局将根据第一行的宽度固定，并且在您输入可编辑 div 时不会展开。只需将这个添加到您的 css 中（可能想使用表中的类作为选择器）

table {
   table-layout: fixed;
}

这确实会产生另一个问题 - 当 contenteditable div 失去焦点时，文本的滚动位置不会重置为 0。您可以通过在 div 模糊时重置它来解决此问题。像这样的

    <div class="editable-input" contenteditable (blur)="resetOverflowPosition($event)">

然后在组件中添加处理程序

  resetOverflowPosition(event) {
    event.target.scrollLeft = 0;
  }

【讨论】：