Table Row, when add padding to one cell the whole row gets pushed down

Question

I have a table, with some rows and columns, here is the example of the second row

<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>

I added storeDescriptionCell in my css

td.storeDescriptionCell{
padding:20px;
}

I even tried using the div, but everytime I add margin or padding to cell or div, MyCity, Store Title goes down with the Description. I just want the description to lay lower.

Answer 1

This is how html tables work. If you want one cell to be lower than the rest in a row you might want to try using a rowspan.

Can you provide an image of what you want and what you get.

Looking at the content that you want in your table why not use a th for the headings of the columns.

<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

You could use the following CSS to set all <td> cells to vertical align top and the store description to vertical align bottom:

table td {
    vertical-align: top;
}

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