Why does my <tfoot> border color not override my <tbody> border color?

<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;
}

Why does my <tfoot> border color n开发者_运维问答ot override the <tbody> border color? I would also like to make the border-top color in <tfoot> red.

LIVE EXAMPLE: http://jsfiddle.net/S8tUW/1/

---

write like this :

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

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

check this http://jsfiddle.net/sandeep/S8tUW/19/

---

Ah yes. The rules for working out which border styles apply when borders collapse are a bit complicated. CSS: The Definitive Guide by Eric Meyer has the best explanation I know of.

In order to make the top borders of the cells in your <tfoot> red, you actually need to remove the bottom border styles for the table cells in your <tbody>:

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

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

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

(See http://jsfiddle.net/pauldwaite/S8tUW/28/)

---

This is because of selector specificity.

The selector #tab tr td is way more specific than .foot.

Change your selector to .foot tr td and it should be as you desire.

Demo here.

---

jsFiddle defaults (annoyingly) to using normalize.css, which behaves counterintuitively - increasing selector specificity doesn't make a border "win".

I recommend using border-collapse: separate; (disabling "Normalized CSS" in jsFiddle), coding the CSS in such a way that the only adjacent borders are of the same style (i.e. "duplicates"), and then reverting to "border-collapse: collapse;` to get rid of those. (Which would be essentially Paul D. Waite's solution, that I'll have to apply to my work code now. The solution to this problem I came up with is http://jsfiddle.net/Eywjf/1/ which is excessively verbose and could be made shorter by collapsing.)

---

The green border is applied to the cell, but the red border is applied to the section (tfoot). If you change the style from .foot to .foot td, it works better.