Domanda Imposta il cellpadding e il cellspacing in CSS?


In una tabella HTML, il cellpadding e cellspacing può essere impostato in questo modo:

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

Come si può ottenere lo stesso usando i CSS?


2919
2017-12-04 08:45


origine


risposte:


Nozioni di base

Per controllare il "cellpadding" in CSS, puoi semplicemente usarlo padding su celle di tabella. Per esempio. per 10px di "cellpadding":

td { 
    padding: 10px;
}

Per "cellspacing", puoi applicare il border-spacing Proprietà CSS sul tuo tavolo. Per esempio. per 10px di "cellspacing":

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

Questa proprietà consentirà anche la spaziatura orizzontale e verticale separata, qualcosa che non si potrebbe fare con la "cellula" della vecchia scuola.

Problemi in IE <= 7

Funzionerà in quasi tutti i browser più diffusi, tranne Internet Explorer fino a Internet Explorer 7, dove sei quasi sfortunato. Dico "quasi" perché questi browser supportano ancora il border-collapse proprietà, che unisce i bordi delle celle della tabella adiacenti. Se stai cercando di eliminare la spaziatura delle celle (cioè, cellspacing="0") poi border-collapse:collapse dovrebbe avere lo stesso effetto: nessuno spazio tra le celle della tabella. Questo supporto è bacato, tuttavia, poiché non sovrascrive un esistente cellspacing Attributo HTML sull'elemento della tabella.

In breve: per browser non Internet Explorer 5-7, border-spacing ti maneggia Per Internet Explorer, se la tua situazione è giusta (vuoi 0 cellspacing e la tua tabella non è già definita), puoi usare border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Nota: per una panoramica completa delle proprietà CSS che è possibile applicare alle tabelle e per quali browser, vedere questo fantastica pagina di Quirksmode.


3224
2017-07-09 02:34



Predefinito

Il comportamento predefinito del browser è equivalente a:

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

enter image description here

cELLPADDING

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

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

enter image description here

cellspacing

Controlla lo spazio tra le celle della tabella

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

enter image description here

Entrambi

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

enter image description here

Entrambi (speciale)

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

enter image description here

Nota: Se c'è border-spacing impostato, indica border-collapse la proprietà del tavolo è separate.

Prova tu stesso!

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


849
2018-06-12 10:24



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

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

313
2017-08-24 15:17



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 usare 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 quello di continuare a utilizzare il cellspacing attributo.


104
2017-12-04 09:18



Questo hack funziona per Internet Explorer 6 e successivi, Google Chrome, Firefox e musica lirica:

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

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

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

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


84
2017-12-05 04:30



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. Vedere il Quirksmode collegamento pubblicato altrove per i dettagli di compatibilità. Sembra che non funzioni con le vecchie versioni di Internet Explorer.

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

61
2017-08-20 03:32



La soluzione semplice a questo problema è:

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

44
2017-12-08 16:04



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


40
2017-12-04 09:06



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.


33
2018-06-19 14:57



Solo usando border-collapse: collapse per il tuo tavolo, e padding per th o td


16
2018-01-03 03:12



TBH. Per tutti i fannying con CSS si potrebbe anche solo usare cellpadding="0"  cellspacing="0" dal momento che non sono deprecati ...

Qualcun'altro che suggerisce margini su <td>Ovviamente non l'ha provato.


15
2018-02-26 11:25