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

问题描述 投票:0回答:3

我正在使用 mvc webgrid,它在运行时渲染表格。我希望我的文本框宽度与表格单元格宽度相同。每个表格单元格都有一些,当我设置文本框

width=100%
时,UI 就会变得混乱。 我使用下面的CSS

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

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

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

寻找 CSS 指导。

html css webgrid
3个回答
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 样式中删除填充规格


1
投票

如果我理解正确,你需要 box-sizing 来应用正确的宽度:Fiddle

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

0
投票

我的简单解决方案对我有用:将文本框参数设置为 -> textmode =“MultiLine”和 rows =“1”。

© www.soinside.com 2019 - 2024. All rights reserved.