Make table 100% width if parents have width in percent

Question

I have issues with 100% width of table, I have div content width in pixels, then all sub divs are in percent and work good, but table doesn't.

   #content{
        position: fixed;
        float: left;
        top: 116px;
        width: calc(100% - 125px);
        height: calc(100% - 124px);
        background-color: #bdc9ce;
    }
    .size-3{
        width: 33.333%;
    }
    .inputs-root{
        width: 100%;
    }
    .input-table{
        width: 100%;
    }

<div id="content">
       <div class="size-3">
         <div class="inputs-root">
           <tbody class="input-table">
             <tr>....
             </tr>
           </tbody>
        </div>
      </div>
    </div>

So I don't know, why is width of table longer than .inputs-root... any tips ? I tried to set table-layout: fixed; and word-break too but still same

EDIT

MY CODE :

Render of entire list of inputs - http://pastebin.com/jZvzdgyT

Render of single inputs - http://pastebin.com/DEmAdiD2 its writed in reactjs, so just look on render methods

PICTURES

still larger than parent's div

parent's div -

Answer 1

Finally found solution, i just need to set width of inside to 100%, it looks that width of input blocked min width.

Answer 2

If you have have following css for your table then remove this

table{
    display:block;
}

This overrides the default display mode for the table (display:table)

Removing this might solve the problem

Answer 3

use <table> tag it's works fine

• => width of div.size-3 is 33% of div#content
• ==> width of div.input-root is 100% of div.size-3 it's 33% of div#content
• ===>width of div.input-table is 100% of div.input-root it's 33% of div#content.

I'm added the snippet below.

#content{
        position: fixed;
        float: left;
        top: 116px;
        width: calc(100% - 125px);
        height: calc(100% - 124px);
        background-color: #bdc9ce;
    }
    .size-3{
        width: 33.333%;
    }
    .inputs-root{
        width: 100%;
    }
    .input-table{
        width: 100%;
        background-color:red;
    }

<div id="content">
       <div class="size-3">
         <div class="inputs-root">
           <table class="input-table">
             <tbody >
               <tr>....
               </tr>
             </tbody>
            </table>
        </div>
      </div>
    </div>