问题

在HTML表格中, cellpadding cellspacing 可设置为:

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

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



解决方法

基础

为了控制CSS中的"cellpadding",您只需在表格单元格上使用 padding 即可.例如.为10px的"cellpadding":

td { 
    padding: 10px;
}

对于"单元格间距",您可以将 border-spacing CSS属性应用于表格.例如. 10px的"cellspacing":

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

这个属性甚至可以允许单独的水平和垂直间距,你不能用老派的"单元格空间".

IE中的问题<= 7

这将工作在几乎所有流行的浏览器,除了Internet Explorer,通过Internet Explorer 7,你几乎运气不好.我说"几乎",因为这些浏览器仍然支持 border-collapse 属性,它合并邻接表格单元格的边框.如果您要消除单元格空间(即 cellspacing ="0"),则 border-collapse:collapse 应该具有相同的效果:表格单元格之间没有空格.但是,这种支持是错误的,因为它不会覆盖表元素上现有的 cellspacing HTML属性.

简而言之:对于非Internet Explorer 5-7浏览器, border-spacing 处理您.对于Internet Explorer,如果您的情况正好(您想要0个单元格间距,并且您的表格尚未定义它),您可以使用 border-collapse:collapse

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

注意:有关可以应用于表格和浏览器的CSS属性的详细信息,请参阅此奇妙的Quirksmode页面.




相关问题推荐