Làm thế nào để loại bỏ khoảng cách biên giữa các phần tử TBODY?

Question

QUAN TRỌNG: Câu hỏi này không còn giá trị. Lỗi này đã được khắc phục trong các phiên bản Chrome gần đây.

Tôi sử dụng border-spacing: 1px Quy tắc CSS để nhận tất cả các ô trong số TABLE để có khoảng cách 1px giữa chúng. Tuy nhiên, tôi phải sử dụng nhiều phần tử TBODY trong bảng của mình. Tôi nhận được 2px giữa các yếu tố THEAD, TBODY và TFOOT (Chrome).

Cách dễ nhất để thay thế những khoảng trống 2px này bằng 1px là gì?

Exact HTML và CSS mã: http://jsfiddle.net/qQA3Z/

Answer 1

Lưu ý: Đây là một lỗi Webkit cụ thể. (Không có trong Firefox, và như thường lệ IE thậm chí sẽ không tải jsFiddle để kiểm tra nó.)

Thật không may, không có cách nào để đúng cách sửa lỗi này. Hiện có an open question về chủ đề này. Ngoài ra, có an open bug report since Chrome 8 đã được xác nhận tồn tại thông qua Chrome 20 (và tôi có thể xác nhận trong Chrome 25). Ngoài ra còn có một số open Webkit bug thread về vấn đề này, vẫn là "NEW".

Thành thật mà nói, tôi thậm chí không thể tìm được giải pháp cho việc này. Chơi với border-spacing, margin và thậm chí position dường như không ảnh hưởng đến điều này.

Answer 2

Dường như có xung đột giữa số border-collapse ở mức table và trẻ em thead, tbody, tfoot. Sự chỉnh sửa có:

http://jsfiddle.net/qQA3Z/3/

body { margin: 10px; } 
div {border: 1px solid #aaa; display:inline-block} 
table { 
    background: #fff; 
    border-collapse: collapse; 
} 
td { 
    font-family: Tahoma; 
    background: #ddd; 
    padding: 5px 8px; 
    border:1px solid #fff 
} 

<div> 
<table> 
    <thead> 
     <tr><td colspan='2'>Header</td></tr> 
     <tr><td>Column 1</td><td>Column 2</td></tr> 
    </thead> 
    <tbody> 
     <tr><td>Element</td><td>Element</td></tr> 
     <tr><td>Element</td><td>Element</td></tr> 
    </tbody> 
    <tfoot> 
     <tr><td colspan='2'>Footer</td></tr> 
    </tfoot> 
</table> 
</div> 

Answer 3

Điều này giải quyết nó cho tôi:

table { border-collapse: collapse!important;} 

Answer 4

gì cá nhân giải quyết nó đối với tôi là thay đổi line-height 0

line-height : 0; giãn cách viền: 0