HTML/CSS: biên giới dọc chồng chéo biên giới ngang

Question

Đây là fiddle: http://jsfiddle.net/AV38G/

HTML

<table> 
    <tr class="first-line"> 
     <td class="first-column">Some</td> 
     <td>Foobar</td> 
     <td>Stuff</td> 
    </tr> 
    <tr> 
     <td class="first-column">foobar</td> 
     <td>raboof</td> 
     <td>184</td> 
    </tr> 
    <tr> 
     <td class="first-column">bar</td> 
     <td>87458</td> 
     <td>184</td> 
    </tr> 
    <tr> 
     <td class="first-column">874</td> 
     <td>raboof</td> 
     <td>foobar</td> 
    </tr> 
</table> 

---

CSS:

/* ACTUAL CSS */ 
table { 
    width: 300px; 
    border-collapse: collapse; 
} 
tr td.first-column{ 
    border-left: none; 
} 
tr.first-line { 
    border-bottom: 3px solid green; 
    border-top: none; 
} 
tr.first-line td { 
    border-left: none; 
} 
td { 
    border-left: 3px solid red; 
} 
tr { 
    border-top: 3px solid red; 
} 

Ugly, phải. Vậy tại sao đường viền màu đỏ ghi đè/ghi đè đường viền màu xanh lá cây?

Tôi làm cách nào để có được viền màu xanh lá cây ngang "không bị ảnh hưởng"? (không có HTML5/CSS3, mục đích trợ năng)

Answer 1

Hành vi đó là do bạn đang thu hẹp đường viền của bảng, thay vào đó hãy sử dụng border-spacing: 0;, gọi một lớp trên hàng dữ liệu đầu tiên và tôi đã sử dụng công cụ chọn bên dưới tắt border-top

.second-row td { 
    border-top: 0; 
} 

Demo (Thử nghiệm trên chrome và firefox)

/* ACTUAL CSS */ 
table { 
    width: 300px; 
    border-spacing: 0; 
} 

tr td.first-column{ 
    border-left: none; 
} 

td { 
    border-left: 3px solid red; 
    border-top: 3px solid red; 
} 

tr.first-line td { 
    border-left: none; 
    border-bottom: 3px solid green; 
    border-top: none; 
} 

.second-row td { 
    border-top: 0; 
}