如何在tr的背景颜色上显示td的边框

时间:2013-10-01 13:16:13

标签: html css firefox html-table

使用Firefox 24中的html表来显示信息,我广泛使用CSS来格式化行和列。

我遇到的问题是我为<td>指定了一些边框,为background-color指定了<tr>,但tr的背景颜色与td的边框重叠。 它是正常的,而不是在td的顶部显示tr样式吗?

这两个问题是:

  1. 所有带class="ref"的标签都应正确显示左右两侧的标尺 .ann.tbx行中的边框(设置tr背景颜色时不是这种情况)
  2. 即使在相邻单元格中设置背景颜色,也应始终显示第一列右边框,参见

    div.tb tr td:first-child {
        border-right: 1px solid black;
    }
    
  3. 以下是代码示例(http://jsfiddle.net/RVJSD/):

    CSS:

    /* Default reset style sheet */
    * {
        margin: 0;
        padding: 0;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    .tb {
        font-family: Ubuntu;
        font-size: small;
        text-align: right;
    }
    
    div.tb tr td {
        padding: 0 2px 0 2px;
    }
    
    div.tb tr td {
        padding: 0 2px 0 2px;
    }
    
    div.tb tr td:not(:first-child) {
        width: 92px;
    }
    
    div.tb tr td:first-child {
        border-right: 1px solid black;
    }
    
    div.tb tr:not(:first-child) td:not(:first-child):not(.ref) {
        border-right: 1px solid #b0b0b0;
    }
    
    div.tb tr td.ref { /* FIXME */
        border-left: 2px solid black;
        border-right: 2px solid black;
    }
    
    div.tb tr.ann {
        background: #99CCFF;
        font-size: 1.3em;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid black;
    }
    
    div.tb tr.ann td {
        height: 2.5em;
    }
    
    div.tb tr.ann td:first-child {
        background: white;
        font-size: small;
        font-weight: bold;
        text-align: right;
    }
    
    div.tb tr.ann td.ref {
        background: green;
        color: white;
    }
    
    div.tb tr.txb {
        background: #99CCFF;
        font-weight: bold;
    }
    

    HTML:

    <body>
        <div class="tb">
            <table>
                <thead/>
                <tbody>
                    <tr class="ban"><td>Barfoo</td><td>Bar</td><td>Blah</td><td>Foobar</td><td>FooBlah</td><td>BlahBar</td><td>Foo</td></tr>
                    <tr class="ann"><td>ann</td><td>13</td><td>9</td><td class="ref">13</td><td>12</td><td>9</td><td>15</td></tr>
                    <tr class="nbr"><td>nbr</td><td>-34</td><td>20</td><td class="ref">15</td><td>18</td><td>123</td><td>12</td></tr>
                    <tr class="txb"><td>txb</td><td>2,83%</td><td>3,38%</td><td class"ref">3,84%</td><td>3,21%</td><td>3,52%</td><td>3,27%</td></tr>
                </tbody>
            </table>
        </div>
    </body>
    

    如果可能,我想保留设置border-collapse:collapse(而不是separate),如下:

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    

    并且我不喜欢Table Border Overlap解决方案,因为div会增加额外的边框宽度并使代码不易清晰。

2 个答案:

答案 0 :(得分:10)

您的样式表使用position: relative设置所有内容的样式。这会导致每个单元格成为其自己的堆叠上下文,并且如果它们重叠(在折叠的边框模型中,它们),则将其背景以及其行和表的背景绘制在早期单元格的边框上。而且由于你将所有边界放在单元格的右侧(如同,取决于显示的早期单元格的边界),事情就会失败。

请注意,根据规范,此处的行为未定义; CSS(至少在2.1版本中)没有定义相对定位表格单元格时会发生什么。

答案 1 :(得分:-4)

您是否正在寻找悬停使用:而不是.

div.tb tr.ann td:hover { /* FIXME */
    background: #069D81;
    border-left: 2px dotted #069D81;
    border-right: 2px dotted #069D81;
}

<强> Js FIDDLE