html - 带有 Bootstrap 的 td 中的全高输入

Question

参见 http://jsbin.com/sawofo/2/edit .我正在尝试使用 bootstrap 的 css 用输入填充一个表格单元格，但我留下了一个我无法摆脱的空白。

我的 html 片段是:

<table class="table table-bordered">
  <tbody>
    <tr>
      <td class="with-input"><input class="form-control tall" type="text" value="text"></td>
      <td class="tall">XX</td>
    </tr>
  </tbody>
</table>

允许输入拉伸(stretch)的 CSS 是:

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
}

input.tall {
  margin: 0;
  height: 100% !important;
  display: inline-block;
  width: 100%;
}

但是在输入的底部还有一个缺口，我无法摆脱。它似乎与 Bootstrap 设置有关

* {
    box-sizing: border-box;
}

但我不知道如何在不完全删除 Bootstrap 的情况下扭转这种影响。如果我将 td 设置为使用 content-box，高度没问题，但它会水平溢出到下一个单元格中。

Answer 1

添加填充:0;

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
  padding: 0;
}

input.tall {
  margin: 0;
  height: 100%;
  display: inline-block;
  width: 100%;
  padding: 0;//added
}

输出

http://jsbin.com/kefibozapo/1/