Table-cell ignores width - html

Question

I have a very weird problem with my CSS it's like table-cell ignores width. I have 3 divs with
display: inline-table; vertical-align: middle;
second div have 5 divs inside with
display: table-cell; vertical-align: middle; width: 10%;
there's only 5 divs but they take 100% of their parent. When I change one of those five elements width then the others also change. Every time they fill 100% of their parent. Adding
table-layout: fixed;
doesn't work for me. I would like use flex but it must work on IE9 :/ Vertical align works perfectly.
Does anyone have an idea how to fix this?

Answer 1

Do you want like this?
HTML Codes:
<!-- Table Inline 1 -->
<div class="inline-table">
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
</div>
<!-- Table Inline 2 -->
<div class="inline-table">
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
</div>
<!-- Table Inline 3 -->
<div class="inline-table">
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
</div>
CSS Codes:
.inline-table{
display: inline-table;
border: 1px solid red;
padding: .2em;
}
.table-cell{
display: table-cell; vertical-align: middle;
border: 1px dashed green;
padding: .2em;
width: 10%;
}