删除所有的填充和边距表HTML和CSS

75

我有这张桌子： 

<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;
}

我想删除所有边距和填充，但始终有：

在此处输入图片说明

我该如何解决？

css  html-table  margin  padding 
— begiPass
source

Answers:

134

尝试使用此CSS：

/* Apply this to your `table` element. */
#page {
   border-collapse: collapse;
}

/* And this to your table's `td` elements. */
#page td {
   padding: 0; 
   margin: 0;
}
— 勇气
source
19

尝试这个：

table { 
border-spacing: 0;
border-collapse: collapse;
}
— zoom23
source
2
在折叠模式下进行边框折叠时，边框间距不起作用。
— Ivan Z
@IvanZ那是几年前的事，所以我记不清了，但是有些坏的浏览器需要它。
— wroniasty
5

表是奇数元素。与divs不同，它们具有特殊的规则。将cellspacing和cellpadding属性设置为0，它应该可以解决问题。

<table id="page" width="100%" border="0" cellspacing="0" cellpadding="0">
— 默默
source
3
可接受的答案使用css padding和margin，这是cellpacing和cellpadding的推荐替代方案，cellspacing和cellpadding已被弃用很多年了。请注意，HTML5不支持cellpacing和cellpadding。
— ToolmakerSteve
5

尝试使用标签主体删除所需的所有边距和填充。

<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>
— 万达罗斯
source
3

删除表格内单元格之间的填充。只需在表标记中使用cellpadding=0和cellspacing=0属性即可。

— Nps
source
8
最好使用CSS而不是不推荐使用的属性。
— Matteo Tassinari 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.