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样式指针事件可以设置为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.

这些子元素不包含它下面的任何内容，它们只是小按钮。

就是这样！

设置表格高度/宽度

1 个答案: