Cellpadding dans une cellule de table html

est-il possible d'avoir du remplissage de cellules dans une seule cellule par rapport à l'ensemble du tableau html?

18
demandé sur Brian Tompsett - 汤莱恩 2009-07-22 11:37:53

4 réponses

il suffit de styliser la cellule en utilisant CSS:

<table border='1'>
    <tr>
    <td style="padding: 50px;">cell1</td>
    </tr>
    <tr>
    <td>cell2</td>
    </tr>
</table>
29
répondu Curtis Tasker 2009-07-22 17:40:46

pour une utilisation dans le style d'un e-mail, il est parfois difficile de réaliser le rembourrage avec css si vous voulez que le courrier soit cohérent à travers les programmes de courrier électronique, en particulier Outlook. Si vous ne voulez pas utiliser css, une solution est de mettre une nouvelle table entière avec une rangée et une cellule dans la cellule que vous voulez appliquer padding à. Ensuite, appliquez le rembourrage sur cette table "one celled".

Dans l'exemple donné dans la question ce serait:

<table border='1'>
 <tr>
  <td>
   <table cellpadding="50">
    <tr>
     <td>cell1</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td>cell2</td>
 </tr>
</table>
13
répondu C.A. Vuyk 2016-10-31 10:38:11

malheureusement non, si vous faites référence à l'utilisation de <table cellpadding="0">, car il s'agit d'un réglage pour l'ensemble de la table. Si vous voulez rembourrage pour être appliqué à une seule cellule, vous devrez ajouter une classe et de lui attribuer un padding valeur de cette façon.

1
répondu Bryan Veloso 2009-07-22 07:49:31

Vous pouvez essayer ce css.

Table à l'aide de 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;
}

en utilisant la classe 'splcell' nous pouvons styliser la cellule individuelle.

.splcell{
       background:red;
       color:#fff;
       font-weight:bold;
       text-align:center;
    } 
1
répondu Aswin KV 2016-10-01 18:57:28