Цвет границы таблицы в CSS с разворотом границы - PullRequest
Новая
       10

Цвет границы таблицы в CSS с разворотом границы

32 голосов
/ 04 ноября 2010

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

Вот пример: у меня таблица со свернутыми границами. Я установил border-bottom на одном поле, а border-top на поле под ним. Оба они определяют одну и ту же границу. 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>

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

Ответы [ 4 ]

59 голосов
/ 04 ноября 2010

Это определенное поведение border-collapse. Страница 357 3-го издания O'Reilly CSS Definition Guide гласит:

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

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

Итак, самый верхний, красный, выигрывает.

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

пример: http://jsfiddle.net/Chapm/

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

более широкие границы побеждают более узкие

и после этого

двойная победа над сплошной, затем пунктирной, пунктирной, ребристой, исходной, канавкой, вставной

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

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

5 голосов
/ 09 февраля 2012

Просто измените 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, ФФ 9, Safari 5.0.5.

1 голос
/ 04 ноября 2010

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

0 голосов
/ 04 ноября 2010

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

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

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

...