html - tabelle - table cellspacing css




Imposta il cellpadding e il cellspacing in CSS? (18)

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

Tutti e due

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.

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?


Avvolgi il contenuto della cella con un div e puoi fare tutto ciò che vuoi, ma devi avvolgere ogni cella di una colonna per ottenere un effetto uniforme. Ad esempio, per ottenere margini più ampi a sinistra e a destra:

Quindi il CSS sarà,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Sì, è una seccatura. Sì, funziona con IE. In realtà, l'ho provato solo con IE, perché è tutto ciò che è permesso usare al lavoro.


Che ne dici di aggiungere lo stile direttamente al tavolo stesso? Questo è invece di utilizzare 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>

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


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 .


La soluzione semplice a questo problema è:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

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

Prova questo:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Oppure prova questo:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Puoi facilmente impostare il padding all'interno delle celle della tabella usando la proprietà padding CSS, è un modo valido per produrre lo stesso effetto dell'attributo padding della tabella.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Allo stesso modo, è possibile utilizzare la proprietà di spaziatura dei bordi CSS per applicare la spaziatura tra i bordi di celle della tabella adiacenti come l'attributo cellspacing. Tuttavia, al fine di lavorare sulla spaziatura dei bordi, il valore della proprietà della proprietà border-collapse deve essere separato, che è il valore predefinito.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


Questo hack funziona per Internet Explorer 6 e versioni successive, Google Chrome , Firefox e Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

La dichiarazione * è per Internet Explorer 6 e 7 e altri browser lo ignoreranno correttamente.

expression('separate', cellSpacing = '10px') restituisce 'separate' , ma entrambe le istruzioni vengono eseguite, poiché in JavaScript è possibile passare più argomenti del previsto e tutti verranno valutati.


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*/
}

TBH. Per tutto il fannying con CSS potresti anche usare cellpadding="0" cellspacing="0" dato che non sono deprecati ...

Qualcun altro che suggerisca margini su <td> ovviamente non ha provato questo.


Basta usare le regole del padding CSS con i dati della tabella:

td { 
    padding: 20px;
}

E per la spaziatura dei confini:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Tuttavia, può creare problemi nella versione precedente di browser come Internet Explorer a causa dell'implementazione diff del modello box.


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding può essere dato dal padding in CSS, mentre cell-spacing può essere impostata impostando la border-spacing per la tabella.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .


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

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





alignment