在HTML表格中,单元格填充和单元格间距可以这样设置:

<table cellspacing="1" cellpadding="1">

如何使用CSS实现这一点?


当前回答

违约

浏览器的默认行为相当于:

table {border-collapse: collapse;}
td    {padding: 0px;}

         

单元格填充

设置单元格内容与单元格墙之间的空间量

table {border-collapse: collapse;}
td    {padding: 6px;}

        

单元格间距

控制表格单元格之间的间距

table {border-spacing: 2px;}
td    {padding: 0px;}

        

Both

table {border-spacing: 2px;}
td    {padding: 6px;}

        

两者(特殊)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

        

注意:如果设置了边框间距,则表示表的边框折叠属性是单独的。

自己试试吧!

在这里,您可以找到实现这一点的旧HTML方法。

其他回答

只需对表数据使用CSS填充规则:

td { 
    padding: 20px;
}

对于边框间距:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

然而,由于box模型的diff实现,它可能会在旧版本的浏览器(如Internet Explorer)中产生问题。

对于那些想要非零单元格间距值的人,下面的CSS对我有用,但我只能在Firefox中测试它。

有关兼容性的详细信息,请参阅其他地方发布的Quirksmode链接。它似乎不适用于较旧的Internet Explorer版本。

table {
    border-collapse: separate;
    border-spacing: 2px;
}

此外,如果您希望cellspacing=“0”,请不要忘记在表的样式表中添加边框折叠:折叠。

我用过!在边境崩溃后很重要

border-collapse: collapse !important;

它在IE7中对我有用。它似乎覆盖了cellspacing属性。

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

如果边距不起作用,请尝试将tr的显示设置为块,然后边距将起作用。