[html] Imposta il cellpadding e il cellspacing in CSS?


12 Answers

Predefinito

Il comportamento predefinito del browser è equivalente a:

table {border-collapse: collapse;}
td    {padding: 0px;}

cELLPADDING

Imposta la quantità di spazio tra il contenuto della cella e la parete della cella

table {border-collapse: collapse;}
td    {padding: 6px;}

cellspacing

Controlla lo spazio tra le celle della tabella

table {border-spacing: 2px;}
td    {padding: 0px;}

Entrambi

table {border-spacing: 2px;}
td    {padding: 6px;}

Entrambi (speciale)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Nota: se esiste un insieme di border-spacing , indica che la proprietà border-collapse della tabella è separate .

Prova tu stesso!

Here puoi trovare il vecchio modo html per raggiungere questo obiettivo.

Question

In una tabella HTML, il cellpadding e il cellspacing possono essere impostati in questo modo:

<table cellspacing="1" cellpadding="1">

Come si può ottenere lo stesso usando i CSS?




L'impostazione dei margini sulle celle di una tabella non ha alcun effetto per quanto ne so. Il vero equivalente CSS per cellspacing è border-spacing - ma non funziona in Internet Explorer.

Puoi utilizzare border-collapse: collapse per impostare in modo affidabile la spaziatura delle celle su 0 come accennato, ma per qualsiasi altro valore penso che l'unico modo per browser sia continuare a utilizzare l'attributo cellspacing .




Ho usato !important dopo il crollo del confine come

border-collapse: collapse !important;

e funziona per me in IE7. Sembra ignorare l'attributo cellspacing.




Semplicemente usando border-collapse: collapse per la tua tabella e padding per th o td




Per coloro che desiderano un valore di cellapelle diverso da zero, il seguente CSS ha funzionato per me, ma sono in grado di testarlo solo in Firefox. Vedi il link Quirksmode pubblicato altrove per i dettagli sulla compatibilità. Sembra che non funzioni con le vecchie versioni di Internet Explorer.

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



CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}



table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}



In una tabella HTML, il cellpadding e il cellspacing possono essere impostati in questo modo:

Per il riempimento cellulare : basta chiamare il semplice padding cella td/th

EX:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Per Cell-Spacing

Basta chiamare la semplice border-spacing table

EX:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

Più stile di tabella tramite il link sorgente CSS qui ottieni più stile di tabella per css




Inoltre, se vuoi cellspacing="0" , non dimenticare di aggiungere border-collapse: collapse nel foglio di stile della table .




Da quello che capisco dalle classificazioni del W3C è che <table> s è inteso per la visualizzazione dei dati 'only'.

Sulla base di ciò ho trovato molto più facile creare un <div> con gli sfondi e tutto ciò e avere una tabella con i dati che vi fluttuavano usando la position: absolute; e background: transparent; ...

Funziona su Chrome, IE (6 e versioni successive) e Mozilla (2 e versioni successive).

I margini sono usati (o comunque significati) per creare un distanziatore tra gli elementi del contenitore, come <table> , <div> e <form> , non <tr> , <td> , <span> o <input> . Usarlo per qualcosa di diverso dagli elementi del contenitore ti terrà impegnato ad adattare il tuo sito web ai futuri aggiornamenti del browser.




Che ne dici di aggiungere lo stile direttamente al tavolo stesso? Questo è invece di usare la table nel tuo CSS, che è un approccio BAD se hai più tabelle sulla tua pagina:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>



td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

se il margin non ha funzionato, prova a impostare la display di tr per block e quindi il margine funzionerà.




Questo stile è per Ripristino completo per le tabelle : celle , spaziatura celle e bordi .

Ho avuto questo stile nel mio file reset.css:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px;/*replace cellpadding*/
}





Related