输入框表格中其余列的大小
发布于2023-03-24 16:15 阅读(595) 评论(0) 点赞(30) 收藏(3)
我有一张桌子，里面有一排输入框。我在调整输入框的大小时遇到了一些问题。我想知道 CSS 是否有某种方法可以自动调整输入框的大小，使其与列中其余内容的大小相同。
输入框大于其余行中的内容，即它大于值单元格的标题 (345678)。有什么方法可以自动使输入框与最大元素大小相同而不大于它。所以在这种情况下，我想让输入框与“标题”单元格一样大，而不是更大。或者我可以将它的大小设置为它上面的值单元格 (345678) 的大小吗？
https://jsfiddle.net/6pzvjt4r/
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>345678</td>
<td>345678</td>
<td>345678</td>
<td>345678</td>
<td>345678</td>
<td>345678</td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>解决方案
input如果未设置，则有一个默认值size。然后你可以设置一个size为 1 或 2 个字符，并通过 css 覆盖它width。
可能的例子
input {
width: 100%;
display: block;/*optionnal*/
}<table>
<thead>
<tr>
<th>Heading</th>
<th>Head</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>345678</td>
<td>34567</td>
<td>123456789</td>
<td>345678</td>
<td>345678</td>
<td>345678</td>
</tr>
<tr>
<td><input size="2" type="text"></td>
<td><input size="2" type="text"></td>
<td><input size="2" type="text"></td>
<td><input size="2" type="text"></td>
<td><input size="2" type="text"></td>
<td><input size="2" type="text"></td>
</tr>
</tbody>
</table>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size
该
size属性是一个数值，指示输入字段应有多少个字符宽。该值必须是大于零的数字，默认值为 20。由于字符宽度不同，这可能准确也可能不准确，因此不应依赖于此；结果输入可能比指定的字符数更窄或更宽，具体取决于字符和字体（使用的字体设置）。
如果您希望输入与数字的大小相匹配，则需要将它们包装在一起。
p {
display:inline-block;
border:solid 1px tomato;
}
input {
box-sizing:border-box;
width:100%;
display:block;
}<p>123456<input size=2 type= text></p>
<p>12345678<input size=2 type= text></p>
<p>1234567890<input size=2 type= text></p>
<p>123<input size=1 type= text></p>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/516808/a331cca462e37f259d65/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力