我有一个表格,其中为所有表格单元格设置了边框。这用于日历。当前日期的表格单元格包含一个div,用于更改该表格单元格的背景颜色。但是,在Firefox中查看时,它会覆盖(或掩盖 - 我不确定)右侧和底部表格单元格边框。它会覆盖Opera中的顶部和左侧表格单元格边框。它在Chrome和Safari中运行良好。它尚未在IE中测试过。如何在Firefox和Opera中显示所有边框?这是代码:
HTML:
<table class="calendar" frame="box" rules="none">
<tr>
<td></td>...//seven td's total
</tr>
<tr><td class="very_light_gray"><div class="calendar_day_wrap">Today</div></td>...</tr>
.... // 5 or 6 table rows total
</table>
CSS:
.calendar {
position:inherit;
margin:auto;
height:100%;
width:100%;
z-index:99999;
border-collapse:collapse;
}
.calendar tr {
height:20%;
position:relative;
z-index:2;
}
.calendar td {
border:1px solid #ccc !important;
width:14%;
vertical-align: top;
position:relative;
z-index:2;
}
.calendar_day_wrap {
position:relative;
width:100%;
height:100%;
}
.very_light_gray {
background-color:#F8F8F8 !important;
}
答案 0 :(得分:1)
您设置了rules="none"
,它明确地关闭了列和行边框。
然后设置border-collapse:collapse
,它会使列/行边框折叠单元格边框。对于每个边界段,有一个列表,其中边界声明优先,“明确关闭”具有每个规范的最高优先级。
您想要使用border-collapse: separate
还是不要设置rules="none"
。很可能,你也不想要frame="box"
。
答案 1 :(得分:0)
这个在Opera 12.0和Firefox中运行的代码怎么样。
.calendar {
margin:auto;
height:100%;
width:100%;
border-collapse:collapse;
border:1px solid #ccc;}
.calendar tr {height:20%;}
.calendar tr:nth-child(1) td {
border:1px solid #ccc;
height:20%;}
.calendar td {
width:14%;
vertical-align: top;}
.calendar_day_wrap {
width:100%;
height:100%;}
.very_light_gray {
background-color:#F8F8F8;}