html - 设置表格高度/宽度时表格元素无响应

Question

CSS 设置表格高度或宽度使一些表格行 <tr>和表格数据 <td>无法点击或无法突出显示或无响应。

<style>
.tbl-content{
position:absolute; 
height:; /* if you set a height table data or rows become non-responsive*/
width:; /* if you set a width table data or rows become non-responsive*/
overflow-x:auto;
margin-top: 0px;
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
th:first-child{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
}
th:last-child{
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}
tr:hover {
background-color: #464A52;  
}
</style>

Answer 1

这个答案来自https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/#comment-3400

我问并回答了这个问题，因为我花了一整天的时间来解决这个问题，而且解决方案还没有出现在 StackOverflow 上

CSS 指针事件

CSS 样式 pointer-events 可以设置为 none，这样它就不会接收悬停/点击事件，相反，该事件将发生在它后面的任何东西上。但是，它无法在 IE 10 及以下版本的浏览器上运行。请参阅兼容性表。

caniuse.com 的 CSS 指针事件

由于链接只是在底部被 div 覆盖了一部分，我决定尝试使用指针事件:无。

.some-horizontal-container {
pointer-events: none;
}

但是，所有子元素也不会收到悬停/点击。为了解决这个问题，我们需要将指针事件转回特定于这些元素。

.some-horizontal-container a.btn{
pointer-events: all;
}

更好的方法

当我禁用我正在处理的小部件的指针事件时，尤其是触摸事件时，有一个严重的缺陷。我找到了一种适用于所有场景的更好方法。

我没有禁用和启用指针事件，而是使用可见性样式。

visibility:hidden; for the div that overlays the clickable element under it, then visibility: visible; for the child elements of the overlay where it should be clickable. 

这些子元素不覆盖它下面的任何东西，它们只是小按钮。

就是这样!