My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency.
I want all cells to appear evenly spaced and padded vertically, but I'm facing an issue where the top and bottom cells seem to have less padding compared to those in between due to lack of adjoining cells.
Is there a method to add extra 'padding-top' to the top cell and 'padding-bottom' to the bottom cell specifically, or am I approaching this problem incorrectly?
Note that the table is bordered, so any solution should maintain existing borders or apply them appropriately.
Here is the current structure of the table:
<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>