Q:

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

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:
<a href="/something.html" style="display:block"><div class="left">This is a link</div></a>

but it does not help.

A:

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>

