2012-06-06 8 views
14

Recentemente ho scoperto che ho bisogno di usare l'attributo cellspacing nella mia tabella, ma mi chiedevo se riuscivo a farlo funzionare solo in orizzontale. Non voglio che si diffonda verticalmente, che rovina il layout di tutta la mia pagina.Come si applica solo la spaziatura orizzontale delle celle a una tabella HTML?

+0

possibile duplicato di [Come impostare cellepazia nelle tabelle solo orizzontalmente] (http://stackoverflow.com/questions/12970826/how-to-set-cellspacing-in-tables-only-horizontally) –

risposta

26

Un metodo migliore dell'impostazione di cellspacing="10" consiste nell'utilizzare i CSS. Puoi utilizzare il seguente CSS per scegliere come target la spaziatura delle celle della tabella.

table { 
    border-spacing: 10px 0; 
} 

Il primo valore specifica la spaziatura orizzontale e il secondo valore specifica la spaziatura verticale.

+0

Il 'border- la proprietà spacing' non è riconosciuta da IE 8 e precedenti. –

+0

Questo non funziona per me in Chrome. Un bordo trasparente come descritto qui: http://stackoverflow.com/questions/656207/css-horizontal-table-cell-spacing-how –

+2

devi anche aggiungere "border-collapse: separate;" perché funzioni – jtate

1

Se avete solo bisogno di impostare cellulari contenuti a parte, Usa spaziatura all'interno delle cellule (e impostare cellspacing=0 in HTML). Questo è universalmente supportato dai browser abilitati per CSS.

Se è davvero necessario separare le celle stesse, in modo che ci sia spazio tra i loro bordi o il loro sfondo colorato, quindi risolverebbe il problema, ma solo nel supporto dei browser.

A seconda del contesto, è possibile anche considerare la simulazione della spaziatura delle celle inserendo il contenuto delle celle in un div, impostato per coprire l'area della cella eccetto il riempimento desiderato, che apparirà quindi come spaziatura tra le celle. Dovresti quindi impostare qualsiasi bordo o sfondo desiderato su quegli elementi div.

Problemi correlati