Dziwne rzeczy z ujemnymi marginesami na tabelach

Question

Pytanie nie jest zbyt krótkie, ale łatwe do zrozumienia.

Oto jsFiddle

Mam dwie tabele zagnieżdżone, tak:

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

The 1st Najdziwniejsze

Następnie chcę dodać ujemny hor izontal margines do wewnętrznej tabeli:

.inner { 
    margin: 0 -10%; 
} 

Oczekiwany wynik jest coś takiego:

Ale zamiast tego, mam to:

Problem może być rozwiązane przez umieszczenie wewnętrznego stołu w dziale:

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

The 2nd Najdziwniejsze

Jeżeli ustawić ujemną marżę horizonal -10px (wcześniej użyliśmy procentach, a nie pikseli), a następnie w dodatkowy stół, że porusza się tylko w lewo (jak w pierwszym przypadku), to sigifically zmniejsza się szerokość:

.inner { 
    margin: 0 -10px; 
} 

pytania

• Dlaczego oba te dziwne rzeczy występują?

• Jaki jest sposób na rozwiązanie problemu? Czy dobrym zwyczajem jest po prostu używać otoki, tak jak ja, czy powinienem użyć innego, bardziej sprytnego sposobu?

Answer 1

Jeśli główny stół jest width:100%; będzie rozwijać całą drogę i wewnętrzna tabela zajmie początkową 100% odniesienia. ujemna marża nie rozszerzy go, dopóki nie dopuści do tego żadna treść. to będzie działać, jeśli: https://jsfiddle.net/md2tx2d4/2/

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

lub jeśli pozwolisz żyć bez szerokości i niech rosną z jego treścią

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

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