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

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

如何使用CSS实现这一点?


当前回答

此样式用于表格的完全重置-单元格填充、单元格间距和边框。

我的reset.css文件中有这样的样式:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

其他回答

违约

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

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方法。

此黑客适用于Internet Explorer 6及更高版本、Google Chrome、Firefox和Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*声明适用于Internet Explorer 6和7,其他浏览器将正确忽略它。

expression('separate',cellSpacing='10px')返回'separate',但这两个语句都运行,因为在JavaScript中,您可以传递比预期更多的参数,所有参数都将被求值。

您可以使用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>

基础

为了控制CSS中的“cellpadding”,您可以简单地在表单元格上使用padding。例如,对于10px的“cellpadding”:

td { 
    padding: 10px;
}

对于“cellspacing”,可以将border-spacing CSS属性应用于表。例如,对于10px的“单元间距”:

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

该属性甚至允许单独的水平和垂直间距,这是老式“cellspacing”无法做到的。

IE中的问题≤7

这几乎适用于所有流行的浏览器,除了Internet Explorer到Internet Explorer 7,在那里你几乎没有运气。我说“几乎”是因为这些浏览器仍然支持边界折叠属性,该属性合并相邻表单元格的边界。如果您试图消除cellspacing(即cellspacing=“0”),那么边框折叠:折叠应该具有相同的效果:表单元格之间没有空格。但是,这种支持有缺陷,因为它不会覆盖表元素上现有的cellspacingHTML属性。

简而言之:对于非Internet Explorer 5-7浏览器,边框间距可以控制您。对于Internet Explorer,如果您的情况正好(您需要0个单元格间距,而您的表尚未定义它),则可以使用边框折叠:折叠。

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注意:有关可以应用于表以及适用于哪些浏览器的CSS财产的详细概述,请参阅这个奇妙的Quirksmode页面。

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

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