删除所有填充和边距表 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;
}

我想去掉所有的边缘和填充,但我总是有:

enter image description here

我该怎么办?

387512 次浏览

Try to use this 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;
}

Remove padding between cells inside the table. Just use cellpadding=0 and cellspacing=0 attributes in table tag.

Try this:

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

Tables are odd elements. Unlike divs they have special rules. Add cellspacing and cellpadding attributes, set to 0, and it should fix the problem.

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

I find the most perfectly working answer is this

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

Try using tag body to remove all margin and padding like that you want.

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

Use a display block

style= "display: block";

I had exactly the same problem. That is a table with collapsed borders and <IMG images in each <TD cell. I had padding and margin set to zero on everything. Nothing would get rid of the bottom padding of the <IMG

Changing the CSS attribute of the <IMG tag to "display: block;" solved it. Thank-you - user yoko

Remove Padding from Left and right side :

padding:0; margin:0;

for Table cell padding remove :

cellpadding : 0; cellspacing : 0;