html table border - Imposta il cellpadding e il cellspacing in CSS?





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

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.

color style html5

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 .




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



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




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




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



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



CSS:

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



Ho usato !important dopo il crollo del confine come

border-collapse: collapse !important;

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




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>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</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>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>




Per la cella cellspacing e il cellpadding sono obsoleti in HTML 5. Ora per cellspaces devi usare border-spacing E per celldingding devi usare border-collapse.

E assicurati di non utilizzarlo nel tuo codice HTML5. Cerca sempre di usare questi valori nel file CSS-3.




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




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>



Related