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

【问题标题】：How to set textbox width fit in table cell CSS如何设置文本框宽度适合表格单元格 CSS
【发布时间】：2016-04-06 18:55:39
【问题描述】：

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

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

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

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

寻找css的指导。

【问题讨论】：

标签： html css webgrid

【解决方案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 样式中删除填充规范

【讨论】：

抱歉没有运气。我应用了你的 CSS，但得到了相同的 UI。我希望我的文本框高度和宽度与表格单元格高度宽度相同。
我在你的小提琴中做了，但只尝试了宽度......不确定高度

【解决方案2】：

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

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

【讨论】：

领先我 28 秒！
抱歉没有运气。我应用了你的 CSS，但得到了相同的 UI。我希望我的文本框高度和宽度与表格单元格高度宽度相同。
@Mou 啊，没有注意到身高...请更新您的身高问题。恕我直言，奇怪的是寻找拉伸输入，因为它会是一个文本区域。您可以寻找应用于单元格本身的属性 contenteditable="true" ，因此整个单元格是一个编辑区域