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

Question

我正在使用 mvc webgrid，它在运行时呈现 table。我希望我的文本框宽度与 table 单元格宽度相同。每个 table 单元格都有一些，当我设置文本框 width=100% 然后 UI 变得混乱。我使用下面的 css

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

所以我正在寻求有关 css 的帮助。这是我的网格图像。

这里是 jsfiddle link，任何人都可以在其中看到我的 css 和 html 代码。 https://jsfiddle.net/tridip/qvy0y8sk/

正在寻找 css 的指导。

Answer 1

如果我没理解错的话，你需要box-sizing to apply a correct width: Fiddle

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

Answer 2

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

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 样式中删除填充规范

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

How to set textbox width fit in table cell CSS

html

css

webgrid