web-dev-qa-db-fra.com

Cellpadding dans une cellule de tableau html

Est-il possible d'avoir le remplissage des cellules dans une seule cellule par rapport à l'ensemble du tableau HTML?

htmlhtml-tablecell
18
leora

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>
30
Curtis Tasker

Pour une utilisation dans le style d'un e-mail, il est parfois difficile d'obtenir un remplissage avec css si vous souhaitez que le courrier soit cohérent dans tous les programmes de messagerie, en particulier Outlook. Si vous ne souhaitez pas utiliser css, une solution de contournement consiste à placer un tout nouveau tableau avec une ligne et une cellule dans la cellule à laquelle vous souhaitez appliquer un remplissage. Ensuite, appliquez le remplissage à cette table "unicellulaire".

Dans l'exemple donné dans la question, cela deviendrait:

<table border='1'>
 <tr>
  <td>
   <table cellpadding="50">
    <tr>
     <td>cell1</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td>cell2</td>
 </tr>
</table>
16
C.A. Vuyk

Vous pouvez essayer ce CSS.

Tableau utilisant 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
Aswin KV

Malheureusement non, si vous faites référence à l'utilisation de <table cellpadding="0">, car il s'agit d'un paramètre à l'échelle de la table. Si vous souhaitez que le remplissage soit appliqué à une seule cellule, vous devrez ajouter une classe et lui affecter une valeur padding de cette façon.

1
Bryan Veloso