how to make input field fit completely inside bootstrap table <td>

Question

I am using bootstrap 3. I wanted the input field get fit inside my table. Here is my code, I want to do it in table-bordered class of bootstrap. here is the code:

<table class="table table-bordered table-hover">
                         <thead>
                          <tr>
                            <th class="col-md-4">Organization:</th>
                            <th class="col-md-4">City:</th>
                            <th class="col-md-2">From:</th>
                            <th class="col-md-2">To:</th>
                          </tr>
                         </thead>
                         <tbody>
                          <tr ng-repeat="name in getdrugnameNewArray">
                           <td>Stackoverflow</td>
                           <td>2001</td>
                           <td>2009</td>
                          </tr>
                          </tbody>
                          </table>

CSS code :

td>input {
  margin: 0;
  height: 100% !important;
  display: inline-block;
  width: 100%;
  border-radius: 0 !important;
        }

I need my <td> cell be the input field as such. Any help is appreciated. Thanks.

Answer 1

One way to achieve this, is by making the input absolutely positioned so that it bypasses its parents padding/margin (td), of course the parent has to have position: relative;

Demo:

table td {
  position: relative;
}

table td input {
  position: absolute;
  display: block;
  top:0;
  left:0;
  margin: 0;
  height: 100%;
  width: 100%;
  border: none;
  padding: 10px;
  box-sizing: border-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th class="col-md-4">Organization:</th>
      <th class="col-md-4">City:</th>
      <th class="col-md-2">From:</th>
      <th class="col-md-2">To:</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="name in getdrugnameNewArray">
      <td>Stackoverflow</td>
      <td>2001</td>
      <td>2009</td>
      <td><input type="text" placeholder="2016"></td>
    </tr>
  </tbody>
</table>

jsFiddle: https://jsfiddle.net/azizn/dp0yLa3d/