Question

我有一个动态生成的表，即它的单元格的内容是从数据库中提取的，每行都是根据数据库中的行数创建的。

每个单元格都有一个圆形边框和填充，比如2px。

我想要的效果是所有细胞看起来均匀分布并垂直填充。

问题是，我无法解决这个谷歌搜索或透过Stack Exchange，顶部和底部单元格似乎有较少的“顶部”和“底部”填充。比其他细胞，因为他们没有添加“邻接”细胞的填充。

有没有办法只在顶部单元格中添加额外的“填充顶部”，仅在底部单元格中添加“填充底部”，或者我是否采用了错误的方式？

ps：另一个考虑因素是表格用边框包围，因此解决方案需要以可以维护现有边框（或应用它们）的方式添加空间。

pps：表的代码结构是：

<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

究竟是哪些细胞？

对于第一行和最后一行中的所有单元格：

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

对于每一行的第一个和最后一个单元格：

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

Answer 2

你现在已经习惯了这个css

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

如何在动态生成的表的顶部和底部单元格中添加填充？

2 个答案: