为什么Firefox不会显示表格单元格右边界或左边界?

时间:2012-06-28 21:00:23

标签: css firefox html-table opera css-tables

我有一个表格,其中为所有表格单元格设置了边框。这用于日历。当前日期的表格单元格包含一个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 个答案:

答案 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;}