Question

Est-il possible d'avoir le remplissage des cellules dans une seule cellule par rapport à l'ensemble de la table html?

Était-ce utile?

La solution

Juste le style de la cellule en utilisant le CSS:

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

Autres conseils

Pour une utilisation dans styling un e-mail, il est parfois difficile d'obtenir un rembourrage avec css si vous voulez que le courrier soit cohérente dans tous les programmes de messagerie, notamment Outlook. Si vous ne souhaitez pas utiliser css, une solution consiste à mettre une table tout nouveau avec une ligne et une cellule dans la cellule que vous souhaitez appliquer un rembourrage à. Appliquez ensuite le rembourrage à cette table 'd'une unicellulaire.

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

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

Malheureusement pas, si vous faites référence à l'utilisation <table cellpadding="0">, car c'est un paramètre de table à l'échelle. Si vous voulez padding à appliquer à une seule cellule, vous devrez ajouter une classe et lui attribuer une valeur padding de cette façon.

Vous pouvez essayer css.

Tableau div en utilisant

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 » on peut le style de la cellule individuelle.

.splcell{
       background:red;
       color:#fff;
       font-weight:bold;
       text-align:center;
    } 
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top