时间戳

首页 > 解决方案 > 输入框 表格中其余列的大小

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

问题描述

我有一张桌子，里面有一排输入框。我在调整输入框的大小时遇到​​了一点问题。我想知道 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>

标签： htmlcss

解决方案

inputsize如果未设置，则为默认值。然后，您可以将 a 设置size为 1 或 2 个字符，并通过 css with 覆盖它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>

推荐阅读