Padding o margine predefinito della tabella CSS

Question

Oggi è la mia prima volta che sto giocando con i tavoli e ho notato che i tag table e tr e td hanno un piccolo spazio tra loro, come 1 px o così.

Così qui è il mio problema:

C'è il mio codice:

<table id="upload_box_container"> 
    <tr> 
     <td class="border_bottom_1px">hi1</td> 
     <td class="border_bottom_1px">hi2</td> 
    </tr> 
</table> 

(upload_box_container - è solo il colore di sfondo e colore del bordo)

(border_bottom_1px - come il suo nome dà solo bordo inferiore con dimensione 1px)

e c'è un'immagine di come viene visualizzato: http://postimage.org/image/16wz2ao78/

La mia domanda è

• perché c'è uno spazio tra i due bordi inferiori

• e perché c'è uno spazio nei lati del tavolo (come imbottitura) ei confini don' t toccare il bordo del tavolo

grazie.

Answer 1

Definire

table { border-spacing:0; } 

e dovrebbe rendere nel modo desiderato.

Answer 2

È necessario ripristinare gli stili predefiniti applicati dal browser.

Prova nella parte superiore del vostro file CSS:

table, table tr, table td { padding:none;border:none;border-spacing:0;} 

E controllare in qualche popolare CSS azzera là fuori:

http://meyerweb.com/eric/tools/css/reset/ http://developer.yahoo.com/yui/reset/

Answer 3

preferisco usare questo approccio:

table { table-layout:fixed; border-collapse:collapse; }