html - Table-cell ignores width -

i have weird problem css it's table-cell ignores width. have 3 divs

display: inline-table; vertical-align: middle; 

second div have 5 divs inside with

display: table-cell; vertical-align: middle; width: 10%; 

there's 5 divs take 100% of parent. when change 1 of 5 elements width others change. every time fill 100% of parent. adding

table-layout: fixed; 

doesn't work me. use flex must work on ie9 :/ vertical align works perfectly.

does have idea how fix this?

do want this?

html codes:

<!-- table inline 1 --> <div class="inline-table">     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div> </div>  <!-- table inline 2 --> <div class="inline-table">     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div> </div>  <!-- table inline 3 --> <div class="inline-table">     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </div>     <div class="table-cell">         1     </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%;     }