Question

I have a dynamically generated table i.e. the contents of it’s cells are drawn from a database and each row is created depending on how many rows are in the database.

Each cell has a rounded border and padding, say of 2px.

The effect I want is that all cells look evenly spaced and padded vertically.

The problem is, and I haven’t been able to solve this Googling or looking through Stack Exchange, that the top and bottom cells appear to have less ‘top’ and ‘bottom’ padding resp. than the other cells as they do not have the added padding of an ‘adjoining’ cell.

Is there a way to add extra ‘padding-top’ to the top cell only and ‘padding-bottom’ to the bottom cell only, or am I going about this the wrong way?

ps: the other consideration is that the table is enclosed with a border, so the solution needs to add space in a way that can maintain the existing borders (or have them applied).

pps: the code structure of the table is:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="268px">column one</th>
            <th width="156px">column two</th>
            <th width="188px">column three</th>
            <th width="70px">column four</th>
            <th width="62px">column five</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="Tables_empty">loading data</td>
        </tr>
    </tbody>
    <!--<tfoot>
        <tr>
            <th>column one</th>
            <th>column two</th>
            <th>column three</th>
            <th>column four</th>
            <th>column five</th>
        </tr>
    </tfoot>-->
</table> 

Answer 1

Exactly which cells?

For all of the cells in the first and last rows:

table#example tbody tr:first-child td, table#example tbody tr:last-child td { padding: 10px 5px } /* moar padding */

For the first and last cell of every row:

table#example tbody tr td:first-child, table#example tbody tr td:last-child { padding: 10px 5px } /* moar padding */