Question

我正在使用bootstrap 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/

Answer 2

@Aziz提出了非常好的解决方案，它实际上对我有所帮助。这只是我对这个问题的看法，对我有用。

我发现了以下2种情况的解决方案：

表格单元格中的全角输入（无边距）
表格单元格中的全角输入（带有边距）

1]表格单元格内的全角输入（无边距）如果需要将输入扩展到整个单元格并且不需要输入余量，我可以找到以下解决方案：

td {
    position: relative;
}

input[type="text"], textarea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    resize: none;

    /* for full width without spacing */
    width: 100%;
    border: none;
}

2]表格单元格内的全角输入（带边距）如果需要将输入扩展到整个单元格，但需要输入边距（根据UI），我会发现以下解决方案：

td {
    position: relative;
}

input[type="text"],
textarea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    resize: none;

    /* for column with internal spacing */
    width: 85%;
    padding: 0.3rem;
    margin: 0.2rem 0.5rem;
    border: 1px solid #ddd;
}

在第二种情况下，我们必须对宽度部分进行一些调整。必须提供设计所需的宽度，因为其他属性也需要输入，例如其自己的填充，边距和边框。在这种情况下，如果我们将width：100％保留，它将使部分输入稍微位于单元格外部。我们必须使用宽度找到最合适的位置。

我通过注释以上情况创建了带有和不带有Bootstrap的解决方案，请随时发表评论或取消评论以查看区别：

使用Bootstrap：https://jsfiddle.net/ZakiMohammed/2e10wr5h/8/
没有引导程序： https://jsfiddle.net/ZakiMohammed/6qfobmas/24/

希望有帮助！

如何使输入字段完全适合引导程序表

2 个答案: