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>

允许输入延伸的CSS是：

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
}

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

但是输入的底部仍然存在一个我无法摆脱的差距。它似乎与引导程序设置

有关

* {
    box-sizing: border-box;
}

但我无法弄清楚如何在不完全删除bootstrap的情况下扭转效果。如果我将td设置为使用content-box，则高度很好，但它会水平溢出到下一个单元格中。

Answer 1

添加padding: 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/

Answer 2

我找到了解决方案。似乎由于某种原因，填充从子元素泄漏到td，因此在padding: 10px上设置input也会将其分配给td。解决方案是将输入包装在div样式中：

padding: 0;
display: inline-block;
height: 100%;
width: 100%;

例如：http://jsbin.com/sawofo/4/edit

带有引导程序的td中的全高度输入

2 个答案: