2013-05-07 13 views
38

mam poniższej tabeli:Usuń wszystkie dopełnienie i stół margines HTML i 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> 

A oto css

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

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

i chcę usunąć wszystkie margines i padding, ale zawsze mam, że :

enter image description here

Jak mogę rozwiązać ten problem?

Odpowiedz

81

Spróbuj tego:

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

#page { 
    border-collapse: collapse; 
} 
2

Usuń wyściółkę pomiędzy komórkami wewnątrz tabeli. Wystarczy użyć atrybutów cellpadding=0 i cellspacing=0 w tagu tabeli.

+5

Powinny być lepiej używać CSS zamiast wycofanych atrybutów. –

9

Spróbuj tego:

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

odstępy między krawędziami nie działają, gdy obramowanie obramowania w trybie zwijania. –

+0

'table {border-collapse: collapse;}' zrobiło to dla mnie! – TetraDev

1

Stoliki są elementy nieparzyste. W przeciwieństwie do div s mają specjalne zasady. Dodaj atrybuty cellspacing i cellpadding, ustaw na 0 i powinno to naprawić problem.

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

Przyjęta odpowiedź używa dopełnienia i marginesu css, który jest zalecaną alternatywą dla podziału komórki i komórek, które są przestarzałe od wielu lat. Zauważ, że HTML5 nie obsługuje przestrzeni między komórkami i komórek. – ToolmakerSteve

1

znajdę odpowiedź najdoskonalej pracy jest to

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

Spróbuj za pomocą ciała tag aby usunąć wszystkie Magin i wypełnienie takiego chcesz.

<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> 
Powiązane problemy