Strange things with negative margins on tables - html

Question

The question is not very short, but it's easy to understand.
Here is the jsFiddle
I have two nested tables, like that:
Here is the 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 strange thing
Then, I want to add a negative horizontal margin to the inner table:
.inner {
margin: 0 -10%;
}
The expected output is something like this:
But instead, I get this:
The problem may be solved by placing the inner table in the 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>
The 2nd strange thing
If I set negative horizonal margin -10px (previously we used percents, not pixels), then in additional that table moves only to the left (like in the first case), it sigifically reduces in the width:
.inner {
margin: 0 -10px;
}
The questions
Why both this stange things occur?
What is a way to resolve it? Is it a good practise to simply use a wrapper, like I do, or I should use another, more clever way?

Answer 1

If main table is width:100%; it will expand all the way and inner table will take the initial 100% for reference. negative margin won't expand it as long as no content makes it to .
it will work if :https://jsfiddle.net/md2tx2d4/2/
.inner { margin:0 -10%; width:120%;}
or if you let it live without width and let it grow from its content
table { }
td {width:200px;/* instead real content missing here */}
https://jsfiddle.net/md2tx2d4/1/