无法单击表格行内的按钮答案

【问题标题】：Unable to click button inside table row无法单击表格行内的按钮
【发布时间】：2015-07-10 14:52:58
【问题描述】：

编辑/删除按钮在表格内时不可点击。（鼠标指针也不会像往常一样变化）

有人知道发生了什么吗？

这是小提琴：

    <td class="report-elements report-tools">
            <button class="btn btn-default">Edit</button>
            <button class="btn btn-danger">Delete</button>
    </td>

【问题讨论】：

你有一个类 table table-hover table-responsive table-striped main-panel 的 div 绝对位于按钮上方，你可以尝试删除它

标签： html css twitter-bootstrap button html-table

【解决方案1】：

从.main-panel 中删除z-index: -1。

【讨论】：

@MightyRevenge 很高兴为您提供帮助，作为一般提示，当您无法单击某些内容时，它通常会影响 z-index。

【解决方案2】：

检查小提琴：https://jsfiddle.net/nileshmahaja/xt7spu41/5/

我已将以下代码修改为提供的 Fiddle

/* Slide the table under the top nav bar */
.main-panel {
    margin-top: -2px;
    position: absolute;
    z-index: 1;
}

更改 Z-index 会导致点击按钮。这是因为包含按钮的容器之前位于其他元素的后面。将它的 z-index 更改为 1 后，使主面板 div 出现并制作按钮可点击

【讨论】：