Come rimuovere la spaziatura dei bordi extra tra gli elementi TBODY?

Question

IMPORTANTE: questa domanda non è più valida. Questo bug è stato corretto nelle versioni recenti di Chrome.

Io uso border-spacing: 1px regola CSS per ottenere tutte le cellule nel mio TABLE per avere una spaziatura 1px tra di loro. Tuttavia, devo usare più elementi TBODY nella mia tabella. Ottengo 2px tra THEAD, TBODY e TFOOT elementi (Chrome).

Qual è il modo più semplice per sostituire questi intervalli 2px con 1px?

esatta codice HTML e CSS: http://jsfiddle.net/qQA3Z/

Answer 1

Nota: Questo è un bug specifico per Webkit. (Non presente in Firefox, e come al solito IE non carica nemmeno jsFiddle per testarlo.)

Sfortunatamente, non c'è modo di correggere correttamente. C'è già an open question su questo argomento. Inoltre, c'è an open bug report since Chrome 8 che è stato confermato per esistere attraverso Chrome 20 (e posso confermare in Chrome 25). C'è anche un open Webkit bug thread su questo argomento, che è ancora "NEW".

A dire il vero, non riesco nemmeno a trovare una soluzione per questo. Giocare con border-spacing, margin e anche position non sembrano avere un effetto su questo.

Answer 2

Sembrerebbe che ci sia un conflitto tra la border-collapse a table livello ei bambini thead, tbody, tfoot. Una soluzione possibile:

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

Questo risolve il problema per me:

table { border-collapse: collapse!important;} 

Answer 4

Che personalmente risolto per me stava cambiando il line-height a 0

line-height : 0; interlinea: 0