TBODY elemanları arasındaki ek sınır boşluğu nasıl kaldırılır?

Question

ÖNEMLİ: Bu soru artık geçerli değil. Bu hata, Chrome'un son sürümlerinde giderilmiştir.

Aralarında bir 1px boşluk bulunmalıdır benim TABLE tüm hücreleri elde etmek border-spacing: 1px CSS kuralını kullanın. Ancak, tablomda birden çok TBODY öğeyi kullanmam gerekiyor., TBODY ve TFOOT öğeleri (Chrome) arasında 2px olsun.

1px ile bu 2px boşluklarını değiştirmenin en kolay yolu nedir?

Tam HTML ve CSS kodu: http://jsfiddle.net/qQA3Z/

Answer 1

Not: Bu Webkit özgü hatasıdır. (Firefox'ta mevcut değil ve her zamanki gibi IE bunu test etmek için jsFiddle yüklemeyecektir.)

Maalesef, düzgün bir şekilde bu düzeltmenin düzeltmesinin bir yolu yoktur. Bu konu hakkında zaten an open question var. Ayrıca, Chrome 20 ile varlığını doğruladığı doğrulanmış an open bug report since Chrome 8 (ve ben de Chrome 25'te onaylayabilirim). Ayrıca bu konuda open Webkit bug thread da var, "NEW".

Dürüst olmak gerekirse, bunun için bir çözüm bile bulamıyorum. border-spacing, margin ve position ile oynamanın bunun üzerinde bir etkisi yok gibi görünüyor.

Answer 2

O table seviyesinde border-collapse arasında bir çelişki ve çocukların thead, tbody, tfoot var olduğunu görünür. Olası bir geçici çözüm:

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

Bu benim için çözer: Beni 0

hat yüksekliğine çizgi yüksekliği değişiyordu için bizzat çözüldü Ne

table { border-collapse: collapse!important;} 

Answer 4

: 0; border-spacing: 0