html - 显示在 div 下方的表格边框

Question

我有一张 table ，里面放了一个 div。 div 叠加在几个表格单元格的顶部(按设计)。但是通过 div 仍然可以看到边框，即使 div 根本不是透明的。这是它的样子:

为什么通过div可以看到边框？如何防止边框通过 div 显示，并使 div 完全透明？

这是一个 jsfiddle演示它，这是我的 html 和 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

只需将z-index: 1; 赋给.mydiv

演示:http://jsfiddle.net/ffjpnv3b/4/