Цвет рамки таблицы в CSS с крахом

Я хочу поместить строку над некоторым полем в таблицу, чтобы указать, что она представляет собой сумму вышеуказанных значений. Тем не менее, таблица уже имеет границы по умолчанию.

Вот пример: у меня таблица с границами рухнула. Я установил border-bottom на одно поле и верхний край в поле под ним. Оба они указывают одну и ту же границу. Используется CSS для верхнего. Есть ли способ использовать нижний?

<html>
    <head>
        <style type="text/css">
            table { border-collapse: collapse; }
            td.first { border-bottom: solid red 1px; }
            td.second { border-top: solid gold 1px; }
        </style>

    <body>
        <table>
            <tr><td class="first">Hello</td></tr>
            <tr><td class="second">World</td></tr>
        </table>
    </body>
</html>

Это показывает две ячейки с красной линией между ними. Есть ли способ получить золотую линию?

Ответ 1

Это определенное поведение border-collapse. Страница 357 из OEReilly CSS Definitive Guide 3rd Edition гласит:

если сжимающиеся границы имеют одинаковый стиль и ширину, но отличаются по цвету, затем... от большинства до наименее предпочтительных: ячейка, строка, группа строк, столбец, группа столбцов, таблица.

если... происходит от того же типа элемента, например двух строк... затем цвет берется из границ, которые являются самыми верхними и самыми левыми.

Таким образом, верхний, красный, побеждает.

Один из способов переопределить это может состоять в том, чтобы использовать ячейку для цвета, чтобы победить цвет для строки.

example: http://jsfiddle.net/Chapm/

Правила, которые имеют более высокий приоритет, чем это правило "того же цвета"

более широкая граница выигрывает более узкие

и после этого

двойной выигрыш над сплошным, затем пунктирный, пунктирный, гребень, начало, паз, вставка

Вы можете использовать 2px для золота, чтобы выиграть, и я пробовал в Chrome использовать 1px, но double, и он выглядит как 1px solid, и он также победит над красным. Хотя, если вы хотите использовать этот метод, лучше всего убедиться, что поддерживаемые браузеры ведут себя так же, используя эту технику.

http://jsfiddle.net/Chapm/2/

Ответ 2

Просто измените border-collapse, чтобы разделить и установить границу с интервалом до нуля.

Примечание. IE8 поддерживает свойство border-spacing только в том случае, если указан параметр! DOCTYPE.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            table {
                border-collapse: separate;
                border-spacing: 0px;
            }
            td.first { border-bottom: solid red 1px; }
            td.second { border-top: solid gold 1px; }
        </style>
    </head>
    <body>
        <table>
            <tr><td class="first">Hello</td></tr>
            <tr><td class="second">World</td></tr>
        </table>
    </body>
</html>

Протестировано на win7 с помощью: Chrome 16, IE 9, FF 9, Safari 5.0.5.

Ответ 3

Удалите border-collapse: collapse; из вашего кода, вместо этого установите для атрибута cellspacing значение 0 для вашей таблицы.

Ответ 4

Просто удалите td.first { border-bottom: solid red 1px; } из вашего стиля.

Или измените red на gold в селекторе td.first.

Пример здесь.