可编辑单元格不会与引导表中的相邻单元格重叠答案

【问题标题】：Editable cell doesn't overlap neighbour cells in bootstrap table可编辑单元格不会与引导表中的相邻单元格重叠
【发布时间】：2016-03-09 19:39:33
【问题描述】：

我使用 bootstrap 3 并有一个 bootstrap-table 表，其中包含可编辑的单元格和可调整大小的列。对于调整大小，我使用扩展名bootstrap-table-resizable，对于单元格编辑bootstrap-table-editable，它使用x-editable。

可编辑单元格（带有按钮的文本区域）不会与相邻单元格重叠。我尝试将z-index 设置为可编辑组件，但没有帮助。

jsfiddle

html

<table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
    <thead>
    <tr>
        <th data-field="name" >Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count" >Forks</th>
        <th data-field="description" >Description</th>
    </tr>
    </thead>
</table>

javascript

$.fn.editable.defaults.mode = 'inline';

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}]

$('table').bootstrapTable({
    data: data,
  resizable: true
});

$('tr td').editable({
    type: 'textarea',
    showbuttons: true
});

【问题讨论】：

我希望这是我遇到的问题，但并不完全相同。使用您原来的小提琴，将模式更改为弹出并发生奇怪的行为。当您单击要编辑的单元格时，您单击的单元格右侧的另一个单元格，移动并出现一个新的表格单元格。当您单击保存/取消按钮时，一切都会恢复正常。这有什么道理吗？ jsfiddle.net/3L7vgcx0/207
@HPWD 修复引导表和 x-editable 插件的一些问题真的很难。那是很久以前的事了。我建议在 Github 上为两个存储库创建新问题并检查问题和拉取请求。我记得 x-editable 不再维护，您可以在 Github 上找到许多修复和答案。祝你好运！
感谢您的建议。与任何项目一样，这个项目时间紧迫，需要注意兔子洞。

标签： css twitter-bootstrap twitter-bootstrap-3 x-editable bootstrap-table

【解决方案1】：

这对我有用：

[.editable-inline{
  position: relative;
  background-color: #fff;
  z-index: 1;
}]

【讨论】：

【解决方案2】：

我忘记添加position: relative。现在可以了。

.editable-input,
.editable-buttons button{
  position: relative;
}

【讨论】：