Div-(Table)Layout breaks when surrounded by link - html

Question

I have a problem and I tried so many hours to solve this, so I wanted to ask you if you have an idea for me.
I made a Div-Table-Layout and everything ist ok now.
Now I want to make a whole row clickable with just css Style and tried the following in the first row:
<a><tr><td></td></tr></a>
When I do this, the columns aren't as wide as before I entered the a-tag.
Is there any way to do this?
<div class="divTable">
<div class="divTableBody">
<a href="#" class="divTableRow">
<div class="col-xs-2 divTableCell">21</div>
<div class="divTableCell divTableCellRight col-xs-10">Test</div>
</a>
<div class="divTableRow">
<div class="col-xs-2 divTableCell ">21</div>
<div class="divTableCell divTableCellRight col-xs-10">Test</div>
</div>
<div class="divTableRow">
<div class="col-xs-2 divTableCell ">21</div>
<div class="divTableCell divTableCellRight col-xs-10">Test</div>
</div>
</div>
</div>
https://jsfiddle.net/9b905xry/2/

Answer 1

Just remove the div tag and add divTableRow to anchortag...
Hope this will help you..
.divTable {
display: table;
width: calc(100% - 30px);
margin: 15px;
}
.divTableRow {
display: table-row;
}
.divTableRow:nth-of-type(odd) {
background: #e0e0e0;
}
.divTableRow:nth-of-type(even) {
background: #FFFFFF;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
height: 96px;
display: table-cell;
padding: 1em;
text-align: center;
vertical-align: middle;
float: none;
}
.divTableCellLeft {
text-align: center;
}
.divTableCellRight {
text-align: left;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<a href="" class="divTableRow">
<div class="col-xs-2 divTableCell">21</div>
<div class="divTableCell divTableCellRight col-xs-10">Test</div>
</a>
<div class="divTableRow">
<div class="col-xs-2 divTableCell ">21</div>
<div class="divTableCell divTableCellRight col-xs-10">Test</div>
</div>
<div class="divTableRow">
<div class="col-xs-2 divTableCell ">21</div>
<div class="divTableCell divTableCellRight col-xs-10">Test</div>
</div>
</div>
</div>

Answer 2

I think you might be going about this the wrong way I'm afraid. I really think you need to just make an html table (since this looks very much like tabular data) and simply have links in the table cells.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table">
<tr>
<td>21</td>
<td>Test</td>
</tr>
<tr>
<td>21</td>
<td>Test</td>
</tr>
</table>