Wie Eingabefeld vollständig in Bootstrap-Tabelle passen

Question

Ich benutze Bootstrap 3. Ich wollte das Eingabefeld in meiner Tabelle passen. Hier ist mein Code, ich möchte es in der Tabelle-umgrenzten Klasse von Bootstrap tun. hier ist der 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; 
     } 

Ich brauche meine <td> Zelle das Eingabefeld als solches sein. Jede Hilfe wird geschätzt. Vielen Dank.

Answer 1

Eine Möglichkeit, dies zu erreichen, ist durch die Eingabe machen absolutely so positioniert, dass es umgeht den Eltern padding/margin (td), natürlich die Eltern hat position: relative;

Demo haben:

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/