问题

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

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

如何使用CSS完成同样的工作?

  最佳答案

基础知识

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

 td { 
    padding: 10px;
}
 

对于“cellphone”,您可以将border-spacing CSS属性应用到表中.例如,对于“cellphone”的10px:

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

这个属性甚至允许单独的水平间距和垂直间距,这与学校的“细胞间距”无关。

IE中的问题<=7

这将在几乎所有流行的浏览器中工作,除了通过Internet Explorer 7进行的Internet Explorer,其中你几乎没有运气.我说“几乎”,因为这些浏览器仍然支持border-collapse属性,它合并了邻近表单单元格的边界.如果你试图消除细胞间距(即cellspacing="0"),那么border-collapse:collapse应该具有相同的效果:表单元格之间没有空格.这种支持是错误的,但是,因为它不覆盖表元素上的现有cellspacing HTML属性.

简言之:对于非Internet Explorer 5-7浏览器,border-spacing处理您.对于Internet Explorer,如果您的情况是正确的(您希望0 cellphone并且您的表没有定义它),您可以使用border-collapse:collapse.

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

注意:对于一个可以应用于表和浏览器的CSS属性的概览,请参阅这个奇妙的Quirksmode page .

  相同标签的其他问题

htmlcsshtml-tablealignment