Editable 单元格与 bootstrap table 中的相邻单元格不重叠

Question

我使用 bootstrap 3 并且有一个 bootstrap-table table with editable cells and resizable columns. For resizing I use extension bootstrap-table-resizable and for cells editing bootstrap-table-editable, which uses 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
});

Answer 1

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

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

Answer 2

这对我有用：

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