Aggiungere spazio tra due particolari <td> s

Ho una tabellaAggiungere spazio tra due particolari <td> s

<tr> 
    <td>One</td> 
    <td>Two</td> 
    <td>Three</td> 
    <td>Four</td> 
</tr>

Come posso aggiungere un po 'di spazio tra i <td> s 'Due' e 'Tre' da sola?

fonte

2012-11-10 Shalin

Imposta il riempimento su CSS o aggiungi '& # 160' (il suo spazio) dopo il testo Due. –

Il modo più semplice:

td:nth-child(2) { 
    padding-right: 20px; 
}

Ma questo non funziona se avete bisogno di lavorare con il colore di sfondo o le immagini nella tabella. In tal caso, qui è una soluzione leggermente più avanzato (CSS3):

td:nth-child(2) { 
    border-right: 10px solid transparent; 
    -webkit-background-clip: padding; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
}

Si inserisce un bordo trasparente alla destra della cella e tira il colore di sfondo/immagine dal confine, creando l'illusione di spaziatura tra le cellule.

Nota: affinché funzioni, la tabella padre deve avere border-collapse: separate. Se devi lavorare con border-collapse: collapse, devi applicare lo stesso stile del bordo alla successiva cella della tabella, ma sul lato sinistro, per ottenere gli stessi risultati.

fonte

2012-11-10 06:59:36 Hubro

Prova questa Demo

HTML

<table> 
    <tr> 
     <td>One</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Four</td> 
    </tr> 
</table>

CSS

td:nth-of-type(2) { 
    padding-right: 10px; 
}

fonte

2012-11-10 07:01:16

Risposta semplice: dare a questi due tds un campo stile.

<tr> 
<td>One</td> 
<td style="padding-right: 10px">Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr>

Tidy uno: utilizzare il nome della classe

<tr> 
<td>One</td> 
<td class="more-padding-on-right">Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr> 

.more-padding-on-right { 
    padding-right: 10px; 
}

complessa: con il selettore nth-child in CSS e specificare i valori speciali imbottiture per questi due, che funziona nei browser moderni.

tr td:nth-child(2) { 
    padding-right: 10px; 
}

fonte

2012-11-10 07:01:43 xiaoyi

Tecnicamente, questo non aggiunge spaziatura tra gli elementi 'td' come richiesto, anche se distanzia i loro contenuti. La differenza tra questi concetti è rilevante per es. se le celle hanno lo sfondo o il bordo impostato. Non c'è modo di impostare realmente la spaziatura tra due elementi 'td' senza impostare la spaziatura tra tutte le celle. –

Hai ragione. Dato che non c'è modo di dare dello spazio extra tra due tds particolari, questa è l'unica cosa che posso inventare. – xiaoyi

@ JukkaK.Korpela: A rigor di termini, vero. Ma praticamente la mia soluzione risolve i problemi che hai citato, dai un'occhiata alla mia risposta qui sotto. – Hubro

è necessario impostare il cellpadding e cellspacing è tutto.

<table cellpadding="5" cellspacing="5"> 
<tr> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr> 
</table>

fonte

2012-11-10 09:41:06

Non solo non fa quello che la domanda è stata posta, quegli attributi dovrebbero * non * essere più usati. –

la mia scelta è stato quello di aggiungere td tra i due td tag e impostare il width-25px. Può essere più o meno a tuo piacimento. Questo può essere di formaggio ma è semplice e funziona.

fonte

2017-08-07 12:30:05 nik

Aggiungere spazio tra due particolari <td> s

risposta

Problemi correlati