2013-05-07 69 views
38

我有这个表:删除所有填充和利润率表HTML和CSS

<body> 
    <table id="page" > 
     <tr id="header" > 
      <td colspan="2" id="tdheader" >je suis</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
    </table> 
</body> 

这里是CSS

html, body, #page { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 

#header { 
    margin:0; 
    padding:0; 
    height:20px; 
    background-color:green; 
} 

,我要删除所有margin和padding但始终我有:

enter image description here

我怎样才能解决这个问题?

回答

81

尝试这种情况:在表内的细胞之间

#page td { 
    padding:0; margin:0; 
} 

#page { 
    border-collapse: collapse; 
} 
2

删除填充。只需在表格标签中使用cellpadding=0cellspacing=0属性即可。

+5

它应该更好地使用CSS而不是弃用的属性。 – 2014-05-16 13:56:22

9

尝试这种情况:

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

在折叠模式下边框折叠时,border-spacing不起作用。 – 2014-11-17 19:13:44

+0

'table {border-collapse:collapse;}'为我做了诡计! – TetraDev 2016-08-19 00:08:49

1

表是奇数元素。不像div他们有特殊的规则。添加cellspacingcellpadding属性,设置为0,它应该解决问题。

<table id="page" width="100%" border="0" cellspacing="0" cellpadding="0"> 
+1

接受的答案使用了css填充和边距,这是细胞间距和cellpadding的推荐替代方法,现已废弃多年。并且请注意,HTML5不支持单元格间隔和单元格填充。 – ToolmakerSteve 2016-04-28 05:00:23

1

我找到最完美的工作答案是这样的

.noBorder { 
    border: 0px; 
    padding:0; 
    margin:0; 
    border-collapse: collapse; 
} 
0

尝试使用标签体去除所有magin和padding一样,你想要的。

<body style="margin: 0;padding: 0"> 
    <table border="1" width="100%" cellpadding="0" cellspacing="0" bgcolor=green> 
     <tr> 
      <td >&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td >&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td >&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
    </table> 
</body>