Question: I have this table structure, where all the columns have a different click method to them. The first column is not so wide, so it's pretty hard to click on it in a mobile browser, but i want to keep it like that, because of the borders.

Is there a way, where the clickable area of the first column could overlap invisibly the second column?

Here's a picture where I try to show what I'm trying to achieve : 

[![enter image description here](https://i.stack.imgur.com/X6IJa.png)](https://i.stack.imgur.com/X6IJa.png)

Here is the HTML (note i'm using special row and column elements because of the onsen UI i'm wrapping my application in)

```
<ons-row>
    <ons-col class="firstcolumn" width="32px">
        <div class="item-thum" style="width:60px;" ng-click="confirm(item, item.id)">
            <div style="overflow-x: hidden; overflow-y: hidden; padding-left: 3px;">
                <ons-icon size="30px" icon="ok"></ons-icon>
            </div>
        </div>
    </ons-col>
    <ons-col ng-click="Details(item, item.id)" class="secondcolumn">
        <div class="titlediv">
            <header>
                <span class="item-title">{{item.name}}</span>
            </header>
        </div>              
    </ons-col>
</ons-row>

```

You can see that in my current code the **col2** has an click event handler which always fires if i click anywhere near the second column.

Answer: 
The first thing that comes to mind is to:

1. Give the first col a greater z-index then the second col

```
.firstcolumn{
    z-index : 2;
}

.secondcolumn{
    z-index : 1;
}

```
2. Extend the padding-right of col1 to cover the bit of col2 you want to be clickable for col1.

I think that's most of the work you would have to do, let me know how it goes.

EDIT: Point 2 might not be needed/appropriate as per the comments below.
I have had a quick play with w3schools TryIt editor and have come up with the following as a start:

```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">

table td {
 position:relative;
 border:1px solid black;
 height:20px;
 width:200px;
}
.overLap {
 position:absolute;
 left:0px;
 top:0px;
 width:150%;
 height:100%;
 background-color:rgba(51,204,51,0.3);
}
.shorter {
 position:absolute;
 right:0px;
 top:0px;
 width:50%;
 height:100%;
 background-color:rgba(255,0,0,0.3);
}
</style>
</head>
<body>

<table>
 <tr>
   <td>
    <div class="overLap"></div>
    <p>Data 1</p>
   </td>
   <td>
    <div class="shorter"></div>
    <p>Data 2</p>
   </td>
 </tr>
</table>

</body>
</html>
```

Its pretty basic and just shows that each table cell contains a div which is sized according to the click space you want. The onclick would then be assigned to each div.