Cose strane con margini negativi sui tavoli

Question

La domanda non è molto breve, ma è facile da capire.

Ecco il jsFiddle

Ho due tabelle nidificate, come quella:

Ecco il markup:

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

La cosa prima strana

Quindi, voglio aggiungere un hor negativo margine di zontale alla tabella interna:

.inner { 
    margin: 0 -10%; 
} 

Il risultato atteso è qualcosa di simile:

Ma invece, ottengo questo:

Il problema può essere risolto inserendo il tavolo interno nel div:

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

La cosa strana secondo

Se ho impostato negativo -10px margine horizonal (in precedenza abbiamo utilizzato percentuali, non pixel), poi nel supplementare che tavolo si muove solo a sinistra (come nel primo caso), è sigifically riduce in larghezza:

.inner { 
    margin: 0 -10px; 
} 

le domande

• Perché entrambe queste cose strane si verificano?

• Che cos'è un modo per risolverlo? È una buona pratica usare semplicemente un wrapper, come faccio io, o dovrei usare un altro, più intelligente modo?

Answer 1

Se tabella principale è width:100%; si espanderà completamente e tabella interna avrà l'iniziale 100% per riferimento. il margine negativo non lo espanderà fino a quando nessun contenuto lo raggiunge. Funzionerà se: https://jsfiddle.net/md2tx2d4/2/

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

o se si lascia vivere senza di larghezza e far crescere dal suo contenuto

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

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