How to add padding to the top and bottom cell of a dynamically generated table?

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>

score 2 · Accepted Answer · answered Sep 17 '12 at 12:28

2

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

answered Sep 17 '12 at 12:28

cimmanon

67,211
17
165
171

this man is a genius! thank you! i am using this at the moment: table#example tbody tr:first-child td {padding: 10px 0 0 0} LINE RETURN HERE table#example tbody tr:last-child td { padding: 0 0 10px 0} and it is working well! – user1063287 Sep 17 '12 at 12:40
oh, i didn't realise you could be so specific and that i do indeed need to define which cells exactly. so, i hope this makes sense, i would like to be able to add padding-top to all of the cells in the first row and padding-bottom to all of the cells in the last row. i imagine however that if i just apply padding-top to the first cell of the first row and padding-bottom to the first cell of the last row, then it will have the same effect, so that is what i am trying to do. any help appreciated, thank you. – user1063287 Sep 17 '12 at 12:54
ok, it is pretty sorted now, thank you again very much, in the end i went with `table#example tbody tr:first-child td {padding: 6px 10px 3px 6px} table#example tbody tr:last-child td { padding: 3px 10px 6px 6px}`. it was a bit complicated because the first column had styling applied to it with an existing class and the whole table also had separate td styling, but i got it working in the end. thank you. – user1063287 Sep 17 '12 at 14:31

score 0 · Answer 2 · answered Sep 17 '12 at 12:03

0

Hi now used to this in your css

td{
padding:xxpx xxpx xxpx xxpx; // acording to your design 
}

answered Sep 17 '12 at 12:03

Rohit Azad Malik

31,410
17
69
97

thank you for your reply, i believe this will add padding to each cell and not just the top and bottom cells. using this would still cause the top and bottom cells to seem like they had half the top and bottom padding resp. because they do not have the padding of adjoining cells below and above them. – user1063287 Sep 17 '12 at 12:11
@user1063287 to apply styles to bottom and top cells you will need to apply styles to `th` elements too, because these elements are used for header and footer: `table.display td, table.display th { padding: XXpx XXpx XXpx XXpx }` – keaukraine Sep 17 '12 at 12:16

How to add padding to the top and bottom cell of a dynamically generated table?

2 Answers2