Cellpadding in una cella di tabella html

Question

È possibile avere una cella di riempimento in una sola cella rispetto all'intera tabella html?

Answer 1

Proprio lo stile della cella usando i CSS:

<table border='1'> 
    <tr> 
    <td style="padding: 50px;">cell1</td> 
    </tr> 
    <tr> 
    <td>cell2</td> 
    </tr> 
</table> 

Answer 2

Sfortunatamente no, se ci si riferisce all'uso di <table cellpadding="0">, poiché si tratta di un'impostazione a livello di tabella. Se vuoi applicare il padding a una sola cella, dovrai aggiungere una classe e assegnarla a tale valore in modo proporzionale allo padding.

Answer 3

Per l'uso in styling una e-mail a volte è difficile da raggiungere con i CSS padding se si desidera che la posta sia coerente in tutti i programmi di posta elettronica, in particolare Outlook. Se non si desidera utilizzare css, una soluzione alternativa consiste nel mettere una nuova tabella intera con una riga e una cella nella cella a cui si desidera applicare il riempimento. Quindi applica il padding a quella tabella 'una cella'.

Nell'esempio riportato nella domanda a questo diventerebbe:

<table border='1'> 
<tr> 
    <td> 
    <table cellpadding="50"> 
    <tr> 
    <td>cell1</td> 
    </tr> 
    </table> 
    </td> 
</tr> 
<tr> 
    <td>cell2</td> 
</tr> 
</table> 

Answer 4

Si può provare questo css.

tabella utilizzando div

HTML

<div class="divTable"> 
    <div class="divTableBody"> 
     <div class="divTableRow"> 
      <div class="divTableCell">1</div> 
      <div class="divTableCell splcell">2</div> 
      <div class="divTableCell">3</div> 
     </div> 
     <div class="divTableRow"> 
      <div class="divTableCell">4;</div> 
      <div class="divTableCell">5</div> 
      <div class="divTableCell">6;</div> 
     </div> 
    </div> 
</div> 

CSS

.divTable{ 
    display: table; 
    width: 100%; 
} 
.divTableRow { 
    display: table-row; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
} 
.divTableCell, .divTableHead { 
    border: 1px solid #999999; 
    display: table-cell; 
    padding: 3px 10px; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
    font-weight: bold; 
} 
.divTableFoot { 
    background-color: #EEE; 
    display: table-footer-group; 
    font-weight: bold; 
} 
.divTableBody { 
    display: table-row-group; 
} 
.splcell{ 
    background:red; 
    color:#fff; 
    font-weight:bold; 
    text-align:center; 
    padding: 5px; 
} 

utilizzando la classe 'splcell' siamo in grado di stile della singola cella.

.splcell{ 
     background:red; 
     color:#fff; 
     font-weight:bold; 
     text-align:center; 
    }