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

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

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

如何使用CSS实现这一点？

当前回答

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

td { 
    padding: 20px;
}

对于边框间距：

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

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

2014-03-15 22:33:41

其他回答

试试看：

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

或者试试这个：

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

2013-06-14 05:51:42

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

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

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

2011-08-20 03:32:59

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

2014-02-27 09:03:37

您可以使用CSS padding属性轻松地在表格单元格内设置填充。这是产生与表的cellpadding属性相同效果的有效方法。

桌子第，标准差{边框：1px实心#666；}表th，表td{填充：10px；/*应用单元格填充*/}<!DOCTYPE html><html lang=“en”><head><meta charset=“utf-8”><title>在CSS中设置Cellpadding</title></head><body><表><thead><tr><th>行</th><th>名字</th><th>姓氏</th><th>电子邮件</th></tr></thead><tbody><tr><td>1个</td><td>克拉克</td><td>肯特</td><td>clarkkent@mail.com</td></tr><tr><td>2个</td><td>彼得</td><td>帕克</td><td>peterparker@mail.com</td></tr><tr><td>3个</td><td>约翰</td><td>兰博</td><td>johnrambo@mail.com</td></tr></tbody></table></body></html>

类似地，您可以使用CSS边框间距属性来应用相邻表格单元格边框之间的间距，如cellspacing属性。但是，为了计算边界间距，边界塌陷属性的值必须是单独的，这是默认值。

表{边界塌陷：分离；边框间距：10px；/*应用单元格间距*/}桌子第，标准差{边框：1px实心#666；}表th，表td{填充：5px；/*应用单元格填充*/}<!DOCTYPE html><html lang=“en”><head><meta charset=“utf-8”><title>在CSS中设置单元格间距</title></head><body><表><thead><tr><th>行</th><th>名字</th><th>姓氏</th><th>电子邮件</th></tr></thead><tbody><tr><td>1个</td><td>克拉克</td><td>肯特</td><td>clarkkent@mail.com</td></tr><tr><td>2个</td><td>彼得</td><td>帕克</td><td>peterparker@mail.com</td></tr><tr><td>3个</td><td>约翰</td><td>兰博</td><td>johnrambo@mail.com</td></tr></tbody></table></body></html>

2017-08-02 09:52:32

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

2009-08-24 15:17:36

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

推荐文章

最新文章

标签