html - Full height input in td with bootstrap -

see http://jsbin.com/sawofo/2/edit. trying fill table cell input, using bootstrap's css, left gap can't rid of.

my html snippet is:

<table class="table table-bordered">   <tbody>     <tr>       <td class="with-input"><input class="form-control tall" type="text" value="text"></td>       <td class="tall">xx</td>     </tr>   </tbody> </table> 

and css allows input stretch is:

td {   padding: 0px !important; }  td.tall {   height: 100px; }  input.tall {   margin: 0;   height: 100% !important;   display: inline-block;   width: 100%; } 

but there still gap @ bottom of input can't rid of. appears have bootstrap setting

* {     box-sizing: border-box; } 

but can't figure out how reverse effect without removing bootstrap. if set td use content-box, height fine overflows horizontally next cell.

add padding: 0;

td {   padding: 0px !important; }  td.tall {   height: 100px;   padding: 0; }  input.tall {   margin: 0;   height: 100%;   display: inline-block;   width: 100%;   padding: 0;//added } 

output

http://jsbin.com/kefibozapo/1/