css - 编辑时不调整大小的可编辑 HTML 表格单元格

Question

我正在尝试使用类似 this 的方法实现一个包含可编辑单元格的表格.该单元格包含一个标签或跨度以及一个输入框，我使用一个标志来决定通过 ng-show 显示哪个。但是当标签可见时，单元格会垂直扩展。它在该演示中很微妙，但您可以看到第二行略微向下移动。

我怎样才能让它保持相同的大小，就像 this 中的可编辑表格行一样？例子？我看过那个例子中的样式，但我无法弄清楚它是如何完成的。非编辑模式的跨度似乎具有“自动”尺寸，但当输入表单出现时，它具有明确的宽度/高度 - 而且它们恰好完全相同。

附言。我愿意接受我这样做的方式不是最佳的想法，在这种情况下，任何替代建议都会很好。

<div ng-controller="MyCtrl">

  <table>
    <tr>
      <td>
        <label ng-click="editing=true" ng-show="!editing">{{ mytext }}</label>
        <input ng-blur="editing=false" ng-show="editing" ng-model="mytext" />
      </td>
    </tr>
    <tr>
      <td>
        <label>some more text</label>
      </td>
    </tr>
  </table>
</div>

Answer 1

我在问题中链接到的 xeditable 示例中发现了为什么单元格不扩展的原因 - 这是因为在 css 中设置了明确的大小:

div[ng-controller] table tr td {
  height: 45px;
  /*text-align: center;*/
  vertical-align: middle;
}

我一开始没有找到这个，因为我在查看包附带的 css 文件，但我在其中找不到任何可以解释它的规则。但它实际上是在演示页面本身的另一个 css 文件中定义的 ( https://vitalets.github.io/angular-xeditable/docs/css/docs.css )。