Margine cella CSS


95

Nel mio documento HTML, ho una tabella con due colonne e più righe. Come posso aumentare lo spazio tra la prima e la seconda colonna con css? Ho provato ad applicare "margin-right: 10px;" a ciascuna delle celle sul lato sinistro, ma senza alcun effetto.


C'è una buona soluzione CSS qui, recentemente aggiornata: stackoverflow.com/a/21551008/2827823
Ason

Risposte:


89

Applicalo al tuo primo <td>:

padding-right:10px;

Esempio HTML:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

12
Un approccio di gran lunga migliore sarebbe usare il crollo del confine: separato
Gaurav Ramanan,

21
Nel caso in cui qualcuno stesse copiando / incollando la tecnica del collasso del confine il commento sopra, dovrebbe essere border-collapse: separate(c'era un errore di battitura nell'ortografia di separatesopra)
Tony DiNitto

1
Inoltre, se vuoi definire la quantità di spazio tra i bordi, dovrai usareborder-spacing: 5px;
Sølve Tornøe

border-spacingaggiunge anche spazio tra le righe. Sfortunatamente, non esiste una proprietà separata per la spaziatura verticale e orizzontale.
Lee Blake

border-spacingaccetta due argomenti: uno per l'orizzontale e uno per il verticale.
OldTinfoil

152

Un avvertimento: sebbene padding-rightpossa risolvere il tuo particolare problema (visivo), non è il modo giusto per aggiungere spaziatura tra le celle della tabella. Ciò che padding-rightfa per una cella è simile a quello che fa per la maggior parte degli altri elementi: aggiunge spazio all'interno della cella. Se le celle non hanno un bordo o un colore di sfondo o qualcos'altro che dà il via al gioco, questo può imitare l'effetto di impostare lo spazio tra le celle, ma non altrimenti.

Come qualcuno ha notato, le specifiche dei margini vengono ignorate per le celle della tabella:

Specifiche CSS 2.1 - Tabelle - Layout visivo del contenuto della tabella

Gli elementi interni della tabella generano riquadri rettangolari con contenuto e bordi. Anche le celle hanno imbottitura. Gli elementi interni della tabella non hanno margini.

Qual è il modo "giusto" allora? Se stai cercando di sostituire l' cellspacingattributo della tabella, allora border-spacing(con border-collapsedisabilitato) è un sostituto. Tuttavia, se sono richiesti "margini" per cella, non sono sicuro di come si possano ottenere correttamente utilizzando i CSS. L'unico trucco a cui riesco a pensare è usarepadding come sopra, evitare qualsiasi stile delle celle (colori di sfondo, bordi, ecc.) E invece utilizzare DIV contenitore all'interno delle celle per implementare tale stile.

Non sono un esperto di CSS, quindi potrei sbagliarmi in quanto sopra (che sarebbe bello saperlo! Anch'io vorrei una soluzione CSS per il margine delle celle di una tabella).

Saluti!


Questo è ottimo e tutto per il riempimento, ma per quanto riguarda il margine? Voglio aggiungere spazio all'esterno della cella che contiene un bordo. Il margine CSS sembra non avere alcun effetto sulle celle.
Levitikon

1
Levitikon, è vero - i margini non funzionano per i motivi sopra. L'unico modo per ottenere quello che vuoi, per quanto ne so, è racchiudere il contenuto della cella in un DIV, aggiungere il margine e il bordo a quel DIV, piuttosto che la cella.
ravi

Ho pubblicato una soluzione CSS molto tempo fa (aggiornata oggi): stackoverflow.com/a/21551008/2827823
Ason


14

Mi rendo conto che questo è abbastanza tardivo, ma per la cronaca, puoi anche usare i selettori CSS per farlo (eliminando la necessità di stili in linea.) Questo CSS applica il riempimento alla prima colonna di ogni riga:

table > tr > td:first-child { padding-right:10px }

E questo sarebbe il tuo HTML, senza CSS !:

<table><tr><td>data</td><td>more data</td></tr></table>

Ciò consente un markup molto più elegante, specialmente nei casi in cui è necessario eseguire molte formattazioni specifiche con CSS.


14

il margine non funziona purtroppo su singole celle, tuttavia potresti aggiungere colonne extra tra le due celle tra le quali vuoi mettere uno spazio ... un'altra opzione è usare un bordo con lo stesso colore dello sfondo ...


Sembra che il bordo abbia lo stesso problema del riempimento: aggiunge spazio tra il contenuto della cella e il confine, non al di fuori del confine.
stewbasic

11

Puoi semplicemente farlo:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

Nessun CSS è richiesto :) Questo 10px è il tuo spazio.


questo è buono, semplice ed efficace, grazie per avermi ricordato +1
Hayden Thring

8
Questo non è un buon approccio per la separazione di struttura e stile. Non è un caso se è richiesto o meno CSS - CSS dovrebbe essere usato per qualcosa di simile.
Simon Robb

non dovrebbe essere <td style = "width: 10px;"> </td>
Rune Jeppesen

1
Ricorda, le soluzioni più semplici sono le migliori. Anche il metodo con lo stile in linea è buono :)
MrTrebor

Funziona per il mio caso specifico. Molto creativo. Grazie
Phan Van Linh

7

Prova padding-right. Non sei autorizzato a mettere margintra le celle.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

4

Utilizzo di border-collapse: separato; non ha funzionato per me, perché ho solo bisogno di un margine tra le celle della tabella non sui lati della tabella.

Ho trovato la prossima soluzione:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

4

Questa soluzione funziona per tdcoloro che hanno bisogno di entrambi bordere paddingper lo styling.
(Testato su Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Aggiornato 2016

Firefox ora lo supporta senza inline-blocke un setwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>


Questo ha funzionato anche per le tabelle css (display: table *) fatte di div.
Necreaux

2

Non puoi isolare singole colonne in una cella in questo modo. Secondo me, la tua migliore opzione è aggiungere un style='padding-left:10px'nella seconda colonna e applicare gli stili su un div o elemento interno. In questo modo puoi ottenere l'illusione di uno spazio più grande.


2

Se hai il controllo della larghezza della tabella, inserisci un riempimento sinistro su tutte le celle della tabella e inserisci un margine sinistro negativo sull'intera tabella.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Nota, la larghezza della tabella deve includere il riempimento / larghezza del margine. Usando quanto sopra come esempio, la larghezza visiva della tabella sarà di 700 px.

Questa non è la soluzione migliore se stai usando i bordi sulle celle della tabella.


2

SOLUZIONE

Ho scoperto che il modo migliore per risolvere questo problema era una combinazione di tentativi ed errori e la lettura di ciò che era stato scritto prima di me:

http://jsfiddle.net/MG4hD/


Come puoi vedere ho alcune cose piuttosto complicate in corso ... ma il principale kicker per far sì che questo abbia un bell'aspetto sono:

PARENT ELEMENT (UL): border-collapse: separato; spaziatura del bordo: .25em; margine sinistro: -.25em;
ELEMENTI BAMBINO (LI): display: tabella-cella; allineamento verticale: al centro;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

1

Seguendo la soluzione di Cian di impostare un bordo al posto di un margine, ho scoperto che puoi impostare il colore del bordo su trasparente per evitare di dover abbinare il colore allo sfondo. Funziona con FF17, IE9, Chrome v23. Sembra una soluzione decente a condizione che non sia necessario anche un confine effettivo.


1

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Usare il riempimento non è un modo corretto di farlo, potrebbe cambiare l'aspetto ma non è quello che volevi. Questo potrebbe risolvere il tuo problema.


Questa soluzione è già pubblicata, non c'è bisogno di 2 risposte che dicano la stessa cosa.
Ason

1

Puoi usarli entrambi:

padding-right:10px;

padding-right:10%;

Ma è meglio usare con % .


1
Ho votato positivamente, ma potresti aver spiegato perché è meglio usare%
Mawg dice reintegrare Monica

1
Normalmente% viene utilizzato per rendere reattivo.
Muhammad Awais

1
Più uno: forse potresti modificare la tua risposta per dirlo? Non molto chi legge potrebbe leggere i commenti .. Se vuoi aggiungere un link a qualcosa sul responsive design, ancora meglio :-)
Mawg dice reinstate Monica

1

Se il riempimento non funziona per te, un'altra soluzione consiste nell'aggiungere colonne extra e impostare un margine tramite la larghezza usando <colgroup>. Nessuna delle soluzioni di riempimento precedenti funzionava per me poiché stavo cercando di dare un margine al bordo della cella stessa, e questo è ciò che ha risolto il problema alla fine:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Applicare uno stile ai bordi delle celle della tabella utilizzando: nth-child in modo che la seconda e la terza colonna appaiano come un'unica colonna.

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

Questo è mascherare il problema, non rispondere. Nessuno imparerà come farlo correttamente in questo modo
Mawg dice reintegrare Monica il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.