程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

输入框表格中其余列的大小

发布于2023-03-24 16:15     阅读(515)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

30 0
收藏该文
已收藏

评论内容:(最多支持255个字符)