layui table单元格内输入框问题探讨

Question

先看图

在项目中用户基本都是上了年纪的人，layui在可编辑字段很隐蔽，不去点击单元格。一般用户都不知道能编辑。所以，用户提出了问题。

思路：
1、用layui模板直接将input加载进去，但是考虑到如果表有N个字段都要编辑，岂不是n个模板。不行pass

2、col对应field里加style:background:url(../img),background-size:cover;用样式背景属性模仿一个input输入框，欺骗用户眼睛。最简单改动最小，但是考虑到背景图片宽度，所以字段也需要固定宽度。但是又怕手比较勤快的人喜欢拉表头，真是一拉毁所有。不行pass

3、最后杀手锏还是style的元素内描边，style: 'outline: 1px solid #e6e6e6;outline-offset: -5px;',很好解决表头单元左右拉动的问题。但是问题IE不支持，所以我们霸气怼了用户都2019年了谁还用IE啊（确实IE很low好不好）。但作为开发者能十全十美那在好不过了，看看各位前端大神还有没有更好办法都兼容到。

最后在非ie浏览器下的效果：

Answer 1

卧草 解决了我的心腹大患，作者我要给你生猴子