Loại bỏ khoảng cách giữa các thẻ tbody

Question

Có cách nào để loại bỏ khoảng cách nhỏ giữa hai thẻ tbody khi cả hai được hiển thị nội tuyến như thế này?

http://jsfiddle.net/kttss/

Như bạn có thể nhìn thấy trong fiddle, ở giữa hai bảng có một khoảng cách nhỏ. Tôi biết tôi có thể loại bỏ điều này bằng tay bằng cách sử dụng margin tiêu cực, nhưng điều này có vẻ như một rắc rối kể từ khi tôi có một bảng với một số biến của tbody s.

<table style="margin:0;" border="1"> 
    <tbody style="display: inline-block; margin:0;"> 
     <tr> 
     <td> 
      1 
     </td> 
     <td> 
      2 
     </td> 
     </tr> 
     <tr> 
     <td> 
      3 
     </td> 
     <td> 
      4 
     </td> 
     </tr> 
    </tbody> 
    <tbody style="display: inline-block; margin: 0;"> 
     <tr> 
     <td> 
      1 
     </td> 
     <td> 
      2 
     </td> 
     </tr> 
     <tr> 
     <td> 
      3 
     </td> 
     <td> 
      4 
     </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Có vẻ như thêm border-spacing: 0; vào các yếu tố table của bạn sẽ hữu ích. Nếu không có điều này, có 2 điểm ảnh xung quanh mỗi biên giới, có nghĩa là có 4 pixel giữa các bảng.

Answer 2

Sử dụng phao thay vì hiển thị inline-block. Bạn cũng phải thu hẹp đường viền bằng border-collapse:collapse hoặc sử dụng border-spacing: 0 như trong câu trả lời của @ JoeEnos.

table { border-collapse:collapse; } 
tbody { float:left; } 

Demo

Với display: inline-block, màu trắng-không gian trong đánh dấu (dòng-chia, các tab) đang sụp đổ và trả lại như một không gian duy nhất. float s không bị ảnh hưởng bởi điều này.