如何设置文本框宽度适合表格单元格CSS

Question

我正在使用mvc webgrid，它在运行时呈现表格。我希望我的文本框宽度与表格单元格宽度相同。每个表格单元格都有一些，当我设置文本框width=100%时，UI就搞砸了。 我使用下面的css

.edit-mode {
    width: 100%;
    display: inline;
}

所以我正在寻找关于CSS的帮助。这是我网格的图像。

这里是jsfiddle链接，任何人都可以看到我的CSS和HTML代码。 https://jsfiddle.net/tridip/qvy0y8sk/

寻找css的指导。

Answer 1

将这些添加到您的输入样式：

display: inline;
width: 100%;
height: 100%
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: none;  /* if you want no box around the input field */

同样在这些输入的td样式中删除填充规范

Answer 2

如果我理解正确，您需要box-sizing才能应用正确的宽度：Fiddle

td input, td button {
  box-sizing:border-box;
  display:block;
  width:100%;
}