在CSS中设置单元格填充和单元格间距？

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

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

如何使用CSS实现这一点？

当前回答

试试看：

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或者试试这个：

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

其他回答

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

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

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

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

待定。对于所有使用CSS的问题，您最好只使用cellpadding=“0”cellspacing=“0“，因为它们没有被弃用。。。

显然，任何其他建议<td>利润的人都没有尝试过这一点。

根据我从W3C分类中了解到的，＜table＞是用于“仅”显示数据的。

基于此，我发现创建一个带有背景和所有背景的＜div＞并使用position:absolute创建一个数据浮动在上面的表要容易得多；背景：透明；。。。

它适用于Chrome、Internet Explorer（6及更高版本）和Mozilla Firefox（2及更高）。

边距用于（或意味着）在容器元素之间创建分隔符，如＜table＞、＜div＞和＜form＞，而不是＜tr＞、＜td＞、＜span＞或＜input＞。将其用于容器元素以外的任何其他内容都会使您忙于调整网站以适应未来的浏览器更新。

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

td { 
    padding: 20px;
}

对于边框间距：

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

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

推荐文章