How to make an entire div clickable (table style divs) - css

Question

Yes, I know, this question have been asked many times and a possible solution is to add style="display:block;" to the link.
For some reason this solution does not work with table style DIVs:
https://jsfiddle.net/exyv8jmw/1/
HTML:
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
CSS:
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
As you can see, the empty green space is clickable only horizontally, but not vertically. I also tried:
<div class="left">This is a link</div>
but it does not help.

Answer 1

You need to add height: 100%; to the link, .left, and .tablerow elements.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
height: 100%;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block;height:100%;">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>

Answer 2

First set .left position to relative, Then set a tag position to absolute and width and height to 100%.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
position: relative;
}
.left a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>

Answer 3

Can't you put the div inside the 'a' element?
<a href="/something.html" >
<div class="left">
This is a link </div>
</a>

Answer 4

Apply the 'left' class to the a element directly, i.e.:
this is a link
Although this does not allow for additional content, it does make the anchor fill the available space.
Part of the problem is that the anchor tag is, by default, a "span" type tag, which only fills a space as big as its content, disregarding internal divs.
You have to make the anchor tag act like a "block" style element, not its surrounding element, or an internal element.

Answer 5

You could add listener to the div id.
<div class="table" id="clik">
document.getElementById("clik").addEventListener("click", function(){
// document.location = "/something.html";
alert("hello");
});