删除所有填充和边距表格 HTML 和 CSS答案

【问题标题】：Remove all padding and margin table HTML and CSS删除所有填充和边距表格 HTML 和 CSS
【发布时间】：2013-05-01 22:18:33
【问题描述】：

我有这张桌子：

<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

【解决方案1】：

尝试使用标签正文删除所有你想要的边距和填充。

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

【讨论】：

【解决方案2】：

尝试使用这个 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;
}

【讨论】：

你太棒了，谢谢。

【解决方案3】：

使用显示块

style= "display: block";

【讨论】：

【解决方案4】：

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

【讨论】：

使用CSS而不是弃用的属性应该会更好。

【解决方案5】：

我发现最完美的答案是这个

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

接受的答案使用 css 填充和边距，这是 cellpacing 和 cellpadding 的推荐替代方案，现在已经弃用多年。请注意，HTML5 不支持单元格间距和单元格填充。

【解决方案7】：

试试这个：

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

【讨论】：

在折叠模式下边框折叠时边框间距不起作用。
@IvanZ 那是几年前的事了，所以我记不太清了，但有一些损坏的浏览器需要它。