Domanda

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 i CSS? Ho provato l'applicazione di "margin-right: 10px;" a ciascuna delle celle sul lato sinistro, ma senza effetto.

È stato utile?

Soluzione

Applicare questo al vostro primo <td>: 

padding-right:10px;

HTML esempio: 

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

Altri suggerimenti

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

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

CSS 2.1 Specification - Tavoli - visiva il layout dei contenuti della tabella

  

elementi di una tabella interna generano   scatole rettangolari con contenuti e   frontiere. Le cellule hanno imbottitura pure.   Elementi tabella interna non hanno   margini.

Qual è il modo "giusto", allora? Se si sta cercando di sostituire l'attributo cellspacing del tavolo, poi border-spacing (con border-collapse disabilitato) è un sostituto. Tuttavia, se sono necessarie "margini" per-cell, io non sono sicuro di come che può essere raggiunto in modo corretto utilizzando i CSS. L'unico trucco mi viene in mente è quello di utilizzare padding come sopra, evitare qualsiasi styling delle cellule (colori di sfondo, bordi, ecc) e di utilizzare invece div contenitore all'interno delle cellule per implementare tale stile.

Non sono un esperto di CSS, così ho potuto benissimo essere sbagliata in quanto sopra (che sarebbe bello sapere! Anch'io vorrei una soluzione CSS margine di cella di una tabella).

Cheers!

Se non è possibile utilizzare imbottitura (per esempio si dispone di bordi in td) provare questo 

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

Mi rendo conto che questo è abbastanza tardiva, ma per la cronaca, è anche possibile utilizzare selettori CSS per fare questo (eliminando la necessità di stili inline.) Questo si applica CSS imbottitura per la prima colonna di ogni riga: 

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

E questo sarà il tuo HTML, CSS sans: 

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

Questo permette di molto più elegante di markup, soprattutto nei casi in cui è necessario fare un sacco di formattazione specifici con i CSS.

margine non funziona, purtroppo, su singole cellule, ma è possibile aggiungere altre colonne tra le due celle che si desidera inserire uno spazio tra ... un'altra opzione è quella di utilizzare un bordo con lo stesso colore dello sfondo ...

Si può semplicemente fare questo: 

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

No CSS è richiesto :) Questo 10px è il vostro spazio.

Prova padding-right. Non ti è permesso di mettere di margin tra le celle. 

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

Utilizzando border-collapse:. Separata; non ha funzionato per me, perché ho solo bisogno di un margine in-tra le celle della tabella non sui lati del tavolo

mi si avvicinò con la soluzione successiva:

- 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>

L'opera soluzione per td di che hanno bisogno sia border e padding per lo styling.
 (Testato su Chrome 32, Internet Explorer 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>

Aggiornamento 2016

Firefox ora supporta senza inline-block e un set width 

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>

Non è possibile individuare singole colonne in una cella in quel modo. A mio parere, la soluzione migliore è quella di aggiungere un style='padding-left:10px' sulla seconda colonna e applicare gli stili su un div interno o elemento. In questo modo è possibile ottenere l'illusione di uno spazio più grande.

Se avete il controllo della larghezza della tabella, inserire un padding-left su tutte le celle della tabella e inserire un negativo margin-left su tutto il tavolo. 

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

table td {
    padding-left: 20px;
}

Nota, la larghezza della tabella deve includere la larghezza del padding / margine. Impiegando il suddetto come esempio, la larghezza visiva della tabella sarà 700px.

Questa non è la soluzione migliore se si sta utilizzando i bordi sulle celle della tabella.

SOLUTION

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

http://jsfiddle.net/MG4hD/


Come potete vedere ho alcune cose piuttosto difficile in corso ... ma il kicker principale di ottenere questo a guardare bene sono:

PARENT ELEMENT (UL): border-collapse: separata; border-spacing: .25em; margin-left: -.25em;
Elementi figlio (LI): display: table-cell; vertical-align: middle;

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; }

Dopo la soluzione di Cian di fissare un confine, in luogo di un margine, ho scoperto è possibile impostare il colore del bordo a trasparente per evitare di dover abbinare colore di sfondo. Lavora in FF17, IE9, Chrome V23. Sembra una soluzione decente condizione non è necessario anche un confine vero e proprio. 

<!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>

Utilizzando imbottitura non è corretto modo di farlo, si può modificare l'aspetto, ma non è quello che volevi. Questo potrebbe risolvere il problema.

È possibile utilizzare entrambi: 

padding-right:10px;

padding-right:10%;

Ma è meglio usare con % .

Se imbottitura non funziona per voi, un altro lavoro intorno è quello di aggiungere altre colonne e impostare un margine tramite la larghezza utilizzando <colgroup>. Nessuna delle soluzioni imbottitura sopra stavano lavorando per me, come ho cercato di dare il bordo della cella in sé un margine, 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>

Stile i bordi delle celle della tabella utilizzando:. Nth-bambino in modo che le colonne 2 ° e la terza sembrano essere una singola 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; }
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top