Javascript 超出div界限的div的HTML可单击区域

我有一个表结构，所有的列都有一个不同的点击方法。第一列不是很宽，所以在移动浏览器中很难点击它，但我想保持这样，因为有边框

有没有办法让第一列的可点击区域与第二列隐形重叠

下面是一张我试图展示我正在努力实现的图片：

这是HTML（注意，我使用特殊的行和列元素，因为我使用的是onsen UI包装我的应用程序）

{{item.name}

---

您可以看到，在我当前的代码中，col2有一个click事件处理程序，当我单击第二列附近的任何位置时，它总是会触发。

首先想到的是：

给第一列的z索引大于第二列的z索引

.firstcolumn{
    z-index : 2;
}

.secondcolumn{
    z-index : 1;
}

扩展col1的右边填充，以覆盖希望可单击col1的col2位

我想这是你必须做的大部分工作，让我知道进展如何

---

编辑：根据下面的评论，第2点可能不需要/不合适。

我已经快速使用了w3schools TryIt editor，并从以下内容开始：

页面标题
表td{
位置：相对位置；
边框：1px纯黑；
高度：20px；
宽度：200px；
}
.重叠{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：150%；
身高：100%；
背景色：rgba（51204,51,0.3）；
}
.更短{
位置：绝对位置；
右：0px；
顶部：0px；
宽度：50%；
身高：100%；
背景色：rgba（255,0,0,0.3）；
}
数据1

数据2

Hmm，您可能需要在图标上进行一些定位、固定宽度、图标包装的透明背景、col1的溢出和z索引。移动设备的“替代”方法是将两个列都更改为100%宽度的块，并将它们彼此置于下方，有效地使它们成为行而不是列，这将完全消除您的问题。请为

.firstcolumn.item thum.titlediv.secondcolumn

发布您的css。在第2点中，您可能指的是

向右填充而不是向左填充。实际上这样做会移动边界，这不是用户想要的。然而，他已经设置了适当的宽度，所以第1点应该足够了。旁注：通常在设置
z-index
es时，建议设置
position:relative
或类似设置，否则它们可能不起作用。在这种情况下可能不需要它，但它仍然需要记住。
.firstcolumn{
    z-index : 2;
}

.secondcolumn{
    z-index : 1;
}