Почему мой <tfoot>цвет границы не перекрывает мой <tbody>цвет границы?

Question

<table id="tab">
    <thead><tr><td>hhh</td><td>hhh</td></tr></thead>
    <tbody><tr><td>aaa</td><td>aaa</td></tr></tbody>
    <tfoot class="foot"><tr class="foot"><td class="foot">fff</td><td>fff</td></tr></tfoot>
</table>

#tab tr td {
    border: solid 2px green;
}

.foot {
    border: solid 2px red !important;
}

Почему мой <tfoot> цвет границы не перекрывает цвет <tbody> границы?Я также хотел бы сделать цвет верхней границы <tfoot> красным.

ПРИМЕР ЖИВОГО: http://jsfiddle.net/S8tUW/1/

Answer 1

напишите так:

.foot tr td{
    border: solid 2px red !important;
}

#tab tbody tr td{
    border-bottom:0;
}

отметьте это http://jsfiddle.net/sandeep/S8tUW/19/

Answer 2

Ах да.Правила определения того, какие стили границ применяются, когда границы коллапса, немного сложны. CSS: Полное руководство Эрика Мейера имеет лучшее из известных мне объяснений.

Чтобы сделать верхние границы ячеек в вашем <tfoot> красномвам действительно нужно удалить стили нижней границы для ячеек таблицы в вашем <tbody>:

#tab tr td {
    border: solid 2px green;
}

#tab tfoot tr td {
    border-color: red;
}

#tab tbody tr td {
    border-bottom-style: none;
}

(см. http://jsfiddle.net/pauldwaite/S8tUW/28/)

Answer 3

jsFiddle по умолчанию (досадно) использовать normalize.css, который ведет себя нелогично - увеличение специфичности селектора не делает границу «выигрышной».

Я рекомендую использовать border-collapse: separate; (отключение «Нормализованного CSS» в jsFiddle), кодировать CSS таким образом, чтобы единственные смежные границы имели одинаковый стиль (то есть «дубликаты»), а затем вернуться к"border-collapse: collapse;`, чтобы избавиться от них. (Это было бы, по сути, решением Пола Д. Уэйта, которое мне сейчас придется применить к моему рабочему коду. Решение этой проблемы, с которой я столкнулся, это * 1004 "*http://jsfiddle.net/Eywjf/1/, который является слишком многословным и может быть сокращен путем свертывания.)

Answer 4

Это связано со спецификой селектора.

Селектор #tab tr td более специфичен, чем .foot.

Измените селектор на .foot tr td, и он должен быть таким, как вы хотите.

Демонстрация здесь .

Answer 5

Зеленая рамка применяется к ячейке, а красная граница применяется к сечению (tfoot).Если вы измените стиль с .foot на .foot td, он будет работать лучше.