入力フィールドをブートストラップテーブル内に完全に収める方法​​

Question

私はブートストラップ3を使用しています。私は入力フィールドを自分のテーブルの中に収めたかったのです。 ここに私のコードですが、私はそれをテーブルボーダークラスのブートストラップでしたいと思います。

<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コード：

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

私は私の<td>セルのような入力フィールドで必要ここ はコードです。どんな助けもありがとうございます。ありがとう。これを達成するための

Answer 1

一つの方法は、もちろん親が持っている必要があり、それはその親のパディング/マージン（TD）をバイパスするように配置された入力absolutelyを行うことであるposition: relative;

デモ：

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/