0

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

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

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

问题是，我无法通过 Google 搜索或查看 Stack Exchange 来解决，顶部和底部的单元格似乎分别具有较少的“顶部”和“底部”填充。比其他单元格，因为它们没有添加“相邻”单元格的填充。

有没有办法只在顶部单元格中添加额外的“padding-top”，而在底部单元格中添加“padding-bottom”，或者我是不是走错了路？

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

2 回答 2

2

究竟是哪些细胞？

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

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 */
于 2012-09-17T12:28:24.950 回答
0

嗨，现在在你的 css 中已经习惯了

td{
padding:xxpx xxpx xxpx xxpx; // acording to your design 
}
于 2012-09-17T12:03:26.730 回答