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

在HTML表格中,cellpaddingcellspacing可以如下设置:

<表cellspacing=“1”cellpadding=“1”>

如何使用CSS实现同样的功能

基础知识

“用于控制”;“细胞填充”;在CSS中,只需在表格单元格上使用填充。例如,对于10px的;“细胞填充”:

td{
填充:10px;
}

至于;“单元间距”;,您可以将边框间距CSS属性应用于表格。例如,对于10px的;“单元间距”:

表{
边界间距:10px;
边界塌陷:分离;
}

这个属性甚至允许单独的水平和垂直间距,这是旧学校所不能做到的;单元间距”

IE中的问题≤ 7

这将适用于几乎所有流行的浏览器,但Internet Explorer 7除外,在Internet Explorer 7中,您几乎不走运。我说;几乎是”;因为这些浏览器仍然支持边框折叠属性,该属性合并相邻表格单元格的边框。如果您试图消除单元格间距(即,cellspacting="0"),则边框折叠:折叠应具有相同的效果:表格单元格之间没有空格。不过,这种支持存在缺陷,因为它不会覆盖table元素上现有的cellspactingHTML属性

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

表{
边界间距:0;
边界塌陷:塌陷;
}

注意:要了解可应用于表和浏览器的CSS属性的详细概述,请参阅此奇妙的Quirksmode页面

发表评论