为什么Firefox不会显示表格单元格右边框或左边框？
提问于 2012-06-28 21:00:23
我有一个为所有表格单元格设置边框的表格。这是用于日历的。当前日期的表单元格包含更改该表单元格背景颜色的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;
}
回答 2
Stack Overflow用户
发布于 2012-06-29 01:45:11
您可以设置rules="none"，它显式关闭列和行的边框。
然后设置border-collapse:collapse，它使用列/行边框折叠单元格边框。对于每个边界段，都有一个列表，列出了哪些边界声明优先，并且“显式关闭”具有每个规范的最高优先级。
您希望使用border-collapse: separate或不设置rules="none"。很有可能，您也不想要frame="box"。
Stack Overflow用户
发布于 2012-06-29 16:30:34
这段在Opera12.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;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11252815
复制相关文章
腾讯云开发者
