6

Firefox 24 で html テーブルを使用して情報を表示し、CSS を広範囲に使用して行と列をフォーマットします。

私が遭遇する問題は、 for <td>、およびbackground-colorforにいくつかの境界線を指定したことです<tr>が、tr の背景色が td の境界線と重なっています。tr のスタイルが td のスタイルの上に表示されるのは正常ですか?

2つの問題は次のとおりです。

  1. すべての tdは、および行class="ref"に 2px の左右の境界線を正しく表示する必要があります (tr の背景色が設定されている場合はそうではありません)。.ann.tbx

  2. 背景色が隣接するセルに設定されている場合でも、最初の列の右の境界線も常に表示する必要があります。

    div.tb tr td:first-child {
    border-right: 1px solid black;
}

コード サンプルは次のとおりです ( 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;
}

また、div によって境界線の幅が追加され、コードが読みにくくなるため、Table Border Overlapソリューションは好きではありません。

4

2 に答える 2

-4

:これは、ホバーの代わりに使用するために探していますか.

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

Jsフィドル

于 2013-10-01T13:23:18.673 に答える