Seltsame Dinge mit negativen Rändern auf Tabellen

Question

Die Frage ist nicht sehr kurz, aber es ist leicht zu verstehen. Hier

ist die jsFiddle

Ich habe zwei verschachtelte Tabellen, wie folgt aus:

Hier ist die Auszeichnungs:

<table class="outer"> 
    <tr> 
    <td></td> 
    <td> 
     <table class="inner"> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     </table> 
    </td> 
    <td></td> 
    </tr> 
</table> 

<style> 
table, tr, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

table { 
    width: 100%; 
} 

.outer { 
    height: 100px; 
} 

.inner { 
    background-color: #ccc; 
    height: 50px; 
} 
</style> 

Die erste Merkwürdige

Dann möchte ich einen negativen Hor hinzufügen izontales Marge auf die innere Tabelle:

.inner { 
    margin: 0 -10%; 
} 

Die erwartete Ausgabe ist so etwas wie folgt aus:

Aber stattdessen bekomme ich diese:

Das Problem kann gelöst werden, indem die innere Tabelle in das div:

012 gelegt wird

<!-- outer table --> 
    <div class="wrapper"> 
    <table class="inner-wrapped"> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
    </table> 
    </div> 
<!-- outer table --> 

<style> 
.wrapper { 
    margin: 0 -10%; 
} 

.inner-wrapped { 
    background-color: rgb(0,200,0); 
    height: 50px; 
} 
</style> 

Die 2. Merkwürdige

Wenn ich negativ horizontalen Rand -10px gesetzt (vorher wir Prozente verwendet, nicht Pixel), dann in zusätzlichen, dass Tabelle nur nach links bewegt (wie im ersten Fall), es sigifically reduziert in der Breite:

.inner { 
    margin: 0 -10px; 
} 

die Fragen

• Warum treten diese beiden Dinge auf?

• Was ist eine Lösung? Ist es eine gute Praxis, einfach einen Wrapper zu benutzen, wie ich es tue, oder sollte ich einen anderen, clevereren Weg benutzen?

Answer 1

Wenn Haupttabelle ist width:100%; es wird den ganzen Weg erweitern und innere Tabelle wird die anfängliche 100% als Referenz nehmen. Negativer Rand wird nicht erweitert, solange kein Inhalt es schafft. es wird funktionieren, wenn: https://jsfiddle.net/md2tx2d4/2/

.inner { margin:0 -10%; width:120%;} 

oder wenn Sie es leben ohne Breite lassen und lassen Sie es von seinem Inhalt

table { } 
td {width:200px;/* instead real content missing here */} 

https://jsfiddle.net/md2tx2d4/1/