Strange things with negative margins on tables

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/