table border showing underneath a div - html

Question

I have a table with a div placed into it. The div is superimposed on top of several of the table cells (by design). But the border is still visible through the div, even though the div isn't transparent at all. Here is what it looks like:
Why is the border visible through the div? How would one go about preventing the border from showing through the div, and making the div completely transparent?
Here's a jsfiddle demonstrating it, and here's my html and css:
html:
<table class="mytable">
<tr>
<td>
<div style='height:64px' class='mydiv'>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
css:
.mytable tr:nth-child(4n + 2) {
background-color: #9f9f9f;
}
.mytable th {
font-size: 10px;
height: 25px;
font-family: arial, tahoma;
font-weight: bold;
vertical-align: top;
text-align: center;
border-width: 1px;
border-color: #000000;
border-style: solid;
padding: 0px;
}
.mytable td {
height: 8px;
width: 80px;
border-bottom-style: dashed;
border-right-style: solid;
border-bottom-color: #666666;
border-right-color: #666666;
border-width: 1px;
padding: 0px;
margin-right: 1px;
position: relative;
}
.mydiv {
background-color: #FFFFFF;
border-style: solid;
border-color: #000000;
border-width: 1px;
text-align: center;
vertical-align: middle;
font-family: tahoma, arial;
font-size: 10px;
position: absolute;
top: 0px;
left: 0px;
width: inherit;
}

Answer 1

Just givez-index: 1; to .mydiv
Demo: http://jsfiddle.net/ffjpnv3b/4/