如何使输入字段完全适合引导表<td>

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

实现此目的的一种方法是通过放置输入absolutely，使其绕过其父填充/边距（td），当然父必须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/