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

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

如何使用CSS实现这一点?


当前回答

假设我们希望以符合HTML5的方式为表分配10px的“cellpadding”和15px的“cellspacing”。我将在这里展示两种方法,给出非常相似的输出。

两组不同的CSS财产应用于表的相同HTML标记,但概念相反:

第一个使用边界折叠的默认值(单独),并使用边界间距提供单元间距,第二个选项将边界折叠切换为折叠,并使用border属性作为cellspacing。

在这两种情况下,cellpadding都是通过为tds指定padding:10px来实现的,在这两个情况下,为它们指定的背景色只是为了更清晰的演示。

第一种方法:

表{边框间距:15px}td{背景色:#00eb55;填充:10px;边框:0}<表><tr><td>标题1</td><td>标题2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

第二种方法:

表{边框塌陷:塌陷}td{背景色:#00eb55;填充:10px;边框:15px纯色#fff}<表><tr><td>标题1</td><td>标题2</td></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>

其他回答

CSS:

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

基础

为了控制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页面。

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

border-collapse: collapse !important;

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

用div包装单元格的内容,你可以做任何你想做的事情,但你必须将每个单元格包装在一列中,以获得统一的效果。例如,要获得更宽的左右边距:

因此CSS将是,

div.cell加宽器{边距:0px 15px 0px 15像素;}时差{填充:0px;}<table border=“0”><tr><td class=“紧”><div class=“cellwider”>我的内容</div></td></tr></table>

是的,这很麻烦。是的,它适用于Internet Explorer。事实上,我只在Internet Explorer上测试过这一点,因为这是我们在工作中允许使用的全部功能。

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

我的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 */
}