我有一张 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;
}
最佳答案
只需将z-index: 1;
赋给.mydiv
关于html - 显示在 div 下方的表格边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29847899/