Entfernen Sie alle Auffüllungen und Randtabellen HTML und CSS

74

Ich habe diese Tabelle: 

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

und hier ist die CSS

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

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

und ich möchte alle Ränder und Polster entfernen, aber das habe ich immer:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich das beheben?

css html-table margin padding begiPass
quelle

Antworten:

131

Versuchen Sie, dieses CSS zu verwenden:

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

/* And this to your table's `td` elements. */
#page td {
   padding: 0; 
   margin: 0;
}
wroniasty
quelle
18

Versuche dies:

table { 
border-spacing: 0;
border-collapse: collapse;
}
zoom23
quelle
2
Der Randabstand funktioniert nicht, wenn der Rand im Reduzierungsmodus reduziert wird.
Ivan Z
@IvanZ Es war vor Jahren, also erinnere ich mich nicht genau, aber es gab einige kaputte Browser, die das brauchten.
Wroniasty
5

Tabellen sind ungerade Elemente. Im Gegensatz zu divs haben sie spezielle Regeln. Hinzufügen cellspacingund cellpaddingAttribute, setzen auf 0, und es sollte das Problem beheben.

<table id="page" width="100%" border="0" cellspacing="0" cellpadding="0">
memer
quelle
3
Die akzeptierte Antwort verwendet CSS-Padding und Margin, die empfohlene Alternative zu Cellspacing und Cellpadding, die seit vielen Jahren veraltet sind. Beachten Sie auch, dass HTML5 Cellspace und Cellpadding nicht unterstützt.
ToolmakerSteve
5

Versuchen Sie, mit dem Tag-Body alle gewünschten Ränder und Auffüllungen zu entfernen.

<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>
Vanda Ros
quelle
3

Entfernen Sie die Polsterung zwischen den Zellen in der Tabelle. Verwenden Sie einfach cellpadding=0und cellspacing=0Attribute im Tabellen-Tag.

Nps
quelle
8
Es sollte besser sein, CSS anstelle veralteter Attribute zu verwenden.
Matteo Tassinari
3

Verwenden Sie einen Anzeigeblock

style= "display: block";
Yoko
quelle
1

Ich finde die perfekteste Antwort ist diese

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