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.
Risposte:
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>border-collapse: separate(c'era un errore di battitura nell'ortografia di separatesopra)
border-spacing: 5px;
border-spacingaggiunge anche spazio tra le righe. Sfortunatamente, non esiste una proprietà separata per la spaziatura verticale e orizzontale.
border-spacingaccetta due argomenti: uno per l'orizzontale e uno per il verticale.
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!
Se non puoi usare il padding (ad esempio hai i bordi in td) prova questo
table {
border-collapse: separate;
border-spacing: 2px;
}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.
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 ...
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.
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>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>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.
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:
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; }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.
<!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.
Puoi usarli entrambi:
padding-right:10px;
padding-right:10%;Ma è meglio usare con % .
%
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; }