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

Question

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

可编辑单元格（带按钮的textarea）不会与相邻单元格重叠。我尝试将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;
}]