biên giới dọc của <thead> trong màu khác với phần còn lại của <table> biên giới - chảy máu vào biên ngang dưới đây - Firefox colspan vấn đề

Question

Tôi có một <table> nơi tôi muốn biên giới dọc trong <thead>/<th> là của một màu khác với phần còn lại của các đường viền (tất cả các đường viền rộng 1 pixel, không có viền trên đầu bảng). Điều này có vẻ dễ dàng - vấn đề là trong cả Firefox, Safari và Chrome, các đường viền dọc "chảy máu" vào đường viền ngang bên dưới, trông không đẹp lắm. Trong Firefox có vẻ OK nếu hàng bên dưới <thead> chứa cùng một số cột/ô như <thead>, nhưng nếu tôi sử dụng <colspan> tôi sẽ bị "chảy máu".

Giải pháp rõ ràng là sử dụng "rắn" trên đường viền <th> dọc và "gấp đôi" trên đường viền ngang <td> dưới đây - và điều này thực sự hoạt động trong Safari và Chrome. Tuy nhiên, tôi chưa đưa ra một giải pháp cho Firefox, và tôi nghĩ rằng tôi đã thử mọi thứ. Tôi không thể xóa thu gọn biên giới vì điều đó là cần thiết cho các mục đích khác. (Vâng, theo mặc định có vẻ như tôi muốn trong IE8 và Opera!)

Xem ví dụ: http://jsfiddle.net/7YdCQ/

Mã (một ví dụ rất đơn giản với màu sắc mạnh mẽ) - CSS (tất cả biên giới vững chắc):

table { border-collapse: collapse; } 
thead th { border-left: 1px solid #F00; border-right: 1px solid #F00; } 
tbody th, td { border: 1px solid #0F0; } 

HTML (2 bảng, 1 với colspan):

<table> 
    <thead> 
     <tr> 
      <th>Thead TD 1</th> 
      <th>Thead TD 2</th> 
      <th>Thead TD 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th colspan="3">Tbody TH colspan 3</th> 
     </tr> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table> 
<table> 
    <thead> 
     <tr> 
      <th>Thead TD 1</th> 
      <th>Thead TD 2</th> 
      <th>Thead TD 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

giải pháp là để ghi đè lên phong cách CSS đúng cách. Đã thử nghiệm với colspan trong <th> của cả hai thẻ <thead> và <tbody>. Ví dụ chỉnh sửa: http://jsfiddle.net/7YdCQ/21/

CSS

table { border-collapse: collapse; } 
tbody th, tbody td { border: 1px solid #0F0; } 
thead td, thead th, tbody th { border-left: 1px solid #F00; border-right: 1px solid #F00; } 

HTML

<table> 
    <thead> 
     <tr> 
      <th>Thead TH 1</th> 
      <td colspan='2'>Thead TD colspan 2</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th colspan='3'>Tbody TH colspan 3</th> 
     </tr> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table> 
<br> 
<table> 
    <thead> 
     <tr> 
      <th>Thead TD 1</th> 
      <th>Thead TD 2</th> 
      <th>Thead TD 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table>