ligne de table, quand elle est padding à une cellule toute la ligne est poussé vers le bas

Question

J'ai une table, avec quelques lignes et colonnes, voici l'exemple de la deuxième rangée

<tr> 
    <td valign="top" style="width: 150px;"> 
     <h5>MyCity</h5> 
    </td> 
    <td valign="top" style="width: 360px;"> 
     <h5 class="store_title">Store Title</h5> 
     <p>address</p> 
    </td> 
    <td class="storeDescriptionCell"><div>Description 
    </div> 
    </td> 
</tr> 

J'ajouté storeDescriptionCell dans mon css

td.storeDescriptionCell{ 
padding:20px; 
} 

J'ai même essayé d'utiliser la div, mais chaque fois que j'ajouter la marge ou de rembourrage à la cellule ou div, MyCity, Titre magasin tombe en panne à la description. Je veux juste que la description soit plus basse.

Answer 1

Voici comment fonctionnent les tables html. Si vous souhaitez qu'une cellule soit inférieure au reste d'une rangée, vous pouvez essayer d'utiliser un rowspan.

Pouvez-vous fournir une image de ce que vous voulez et de ce que vous obtenez.

En regardant le contenu que vous voulez dans votre tableau, pourquoi ne pas utiliser un th pour les en-têtes des colonnes.

<table> 
    <tr> 
    <th>My City</th> 
    <th>Store Name</th> 
    <th>&nbsp;</th> 
    </tr> 
    <tr> 
    <td>content</td> 
    <td>$content</td> 
    <td>$content</td> 
    </tr> 
</table> 

Answer 2

Vous pouvez utiliser le CSS suivant pour définir toutes les <td> cellules à haut alignement vertical et la description du magasin en bas d'alignement vertical:

table td { 
    vertical-align: top; 
} 

table td.storeDescriptionCell { 
    vertical-align: bottom; 
}