宽度为 100% 的 HTML 输入文本框溢出表格单元格答案

【问题标题】：HTML input textbox with a width of 100% overflows table cells宽度为 100% 的 HTML 输入文本框溢出表格单元格
【发布时间】：2011-01-23 04:30:43
【问题描述】：

有谁知道为什么宽度为 100% 的输入元素会超出表格的单元格边框。

在下面的简单示例中，输入框越过表格的单元格边框，结果很糟糕。这已经过测试，并且在 Firefox、IE7 和 Safari 上以相同的方式发生。

这对你有意义吗？我是否遗漏了什么，您知道可能的解决方案吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html><head>    
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
   <title>Test input text in table</title>
   <style type="text/css">      
      table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
      table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
      input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
   </style>    
</head><body>

<table cellpadding="0" cellspacing="0">
   <tr>
      <td><p>column one hello babe babe babe</p></td>
      <td><p>column two hello babe more</p></td>
      <td><p>column three hello babe more and more</p></td>
   </tr>
   <tr>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
   </tr>
</table>

</body></html>

【问题讨论】：

我建议，如果您只是使用表格来呈现输入，您可以切换到使用 form 和 label s 和 input s 在 @987654325 内@ 或 ol。也就是说，至少在语义上稍微多一些。当然，你应该使用form，即使你坚持使用table。

标签： html input html-table width

【解决方案1】：

您可以使用 CSS3 box-sizing 属性来包含外部填充和边框：

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

【讨论】：

遗憾的是 IE 7 不能正确处理框大小。在 IE 7 中尝试以下操作...css3.info/preview/box-sizing 或查看css-tricks.com/box-sizing
@AnthonyVO: 是的，IE7 的唯一解决方法是使用 IE 条件 cmets <!--[if lt IE 8]> 和 input[type="text"] {width:95%} 为其添加特定的 CSS

【解决方案2】：

宽度值不考虑边框或内边距：

http://www.htmldog.com/reference/cssproperties/width/

每边有 2px 的内边距，每边有 1px 的边框。
100% + 2*(2px +1px) = 100% + 6px，这比父 td 拥有的 100% 子内容要多。

您可以选择：

根据@pricco's answer设置box-sizing: border-box;；
或使用 0 边距和内边距（避免额外尺寸）。

【讨论】：

对 Sr pts 的进一步回答，您可以将填充和边框设置为 0px，然后 100% 应该可以工作。
确实，即使没有为 td 设置任何填充 - 添加得非常好。
另外，如果填充产生问题，可以使用text-indent 模拟文本前缘之前的填充，并使用line-height 进行垂直填充（尽管保留垂直填充不会'无论如何都不会影响宽度）。

【解决方案3】：

width:95%; 之类的问题在于，它们在宽幅灵活布局中看起来不正确（因为 5% 可能会像 30 像素）。

以下解决方案非常适合我（在 Firefox、IE 9、Safari 中测试）：

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
</tr>
</table>

（添加颜色以便更容易注意到正确的填充）

诀窍是用两个 div 包裹输入，外部有 3px 的边距（这使得它比 td 小 3px），内部有 3px 的填充。这使得输入比 td 小 6px，这是您想要开始的。

我不确定它的机制，但它确实有效。

在这个简单的例子中，它也只适用于右边距为 6 的单个 div。但是，对于我的 Web 应用程序，只有上述解决方案有效。

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
</tr>
</table>

【讨论】：

它有效（赞成 +1）。奇怪的是，我在每个之前插入了一些文本并添加了“white-space:nowrap”以将它们保持在同一行，然后三个溢出表格单元格，如果我删除“white-space:nowrap”一切再次工作。很奇怪。

【解决方案4】：

这个问题之前已经解释过了，所以我只重申一下：宽度不考虑边框和填充。对此没有讨论但我发现对我有很大帮助的一个可能答案是包装您的输入。这是代码，稍后我将解释它的帮助：

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

包裹 INPUT 的 DIV 没有填充，也没有边框。这就是解决方案。 DIV 将扩展到其容器的大小，但它也会尊重边框和填充。现在，INPUT 扩展到其容器的大小将没有问题，因为它是无边框和无焊盘的。另请注意，DIV 的溢出设置为隐藏。似乎默认情况下，项目可能会落在其容器之外，默认溢出可见。这只是确保输入保持在其容器内并且不会尝试戳穿。

我已经在 Chrome 和 Fire Fox 中对此进行了测试。两者似乎都很尊重这个解决方案。

更新：由于我刚刚得到一个随机的反对票，我想说处理溢出的更好方法是使用 pricco 描述的 CSS3 box-sizing 属性：

.myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

这似乎得到了主要浏览器的很好支持，并且不像溢出技巧那样“hacky”。但是，使用这种方法的当前浏览器存在一些小问题（请参阅http://caniuse.com/#search=box-sizing 已知问题）。

【讨论】：

简短说明：overflow: hidden; 的内容仍然以完全相同的方式“穿透”到框的外部，但它被截断而不是显示 - 所以它不会重叠其他内容。

【解决方案5】：

我知道这个问题已经存在 3 年了，但是对于当前的浏览器来说，这个问题仍然存在，人们仍然来到这里。目前的解决方案是calc()：

input {
    width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
    width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}

大多数现代浏览器都支持它。

【讨论】：

【解决方案6】：

问题是由于输入元素框模型造成的。我最近在尝试将移动设备的输入保持在 100% 时找到了一个很好的解决方案。

用另一个元素包装您的输入，例如 div。然后将您想要的输入样式应用到包装器 div。例如：

<div class="input-wrapper">
 <input type="text" />
</div>

.input-wrapper {
    border-raius:5px;
    padding:10px;
}
.input-wrapper input[type=text] {
    width:100%;
    font-size:16px;
}

给 .input-wrapper 圆角填充等，无论你想要什么输入，然后给输入宽度 100%。您的输入很好地填充了边框等，但没有烦人的溢出！

【讨论】：

【解决方案7】：

我从@hallodom 的回答开始解决了这个问题。我所有的输入都包含在 li 中，所以我所要做的就是设置 li overflow:hidden 以消除多余的输入溢出。

.ie7 form li {
  width:100%;
  overflow:hidden;
}

.ie7 input {
  width:100%;
}

【讨论】：

【解决方案8】：

而不是这种利润斗争只是做

input{
    width:100%;
    background:transparent !important;
}

这样单元格边框是可见的，你可以控制行背景颜色

【讨论】：

【解决方案9】：

从 DOCTYPE 声明中取出“http://www.w3.org/TR/html4/loose.dtd”，它可以解决您的问题。

干杯！ :)

【讨论】：

您的意思是使用http://www.w3.org/TR/html4/strict.dtd Strict？参考。 w3.org/QA/2002/04/valid-dtd-list.html 无论如何这不是一个选项，因为现在更改 DOCTYPE 可能会影响网页中许多其他内容的呈现。

【解决方案10】：

使用一些 Javascript，您可以获得包含 TD 的确切宽度，然后将其直接分配给输入元素。

以下是原始的 javascript，但 jQuery 会让它更简洁...

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        el.style.width = pEl.offsetWidth;
    }
}

这个解决方案的问题是：

1) 如果您的输入包含在另一个元素（例如 SPAN）中，那么您需要循环查找 TD，因为像 SPAN 这样的元素会包装输入并显示其大小，而不是限制为 TD 的大小.

2) 如果您在不同级别添加了填充或边距，那么您可能必须从 [pEl.offsetWidth] 中显式减去它。取决于您可以计算的 HTML 结构。

3) 如果表格列的大小是动态的，那么更改一个元素的大小会导致表格在某些浏览器中重排，并且当您按顺序“修复”输入大小时，您可能会得到阶梯式效果。解决方案是以百分比或像素的形式为列分配特定的宽度，或者收集新的宽度并在之后设置它们。请参阅下面的代码..

var inputs = document.getElementsByTagName('input');
var newSizes = [];
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        newSizes.push( { el: el, width: pEl.offsetWidth });
    }
}

// Set the sizes AFTER to avoid stepping...
for (var i = 0; i < newSizes.length; i++)
{
    newSizes[i].el.style.width = newSizes[i].width;
}

【讨论】：

【解决方案11】：

我通过申请box-sizing:border-box解决了这个问题；到表格单元格本身，除了对输入和包装器做同样的事情。

【讨论】：

【解决方案12】：

我用这个解决了这个问题

tr td input[type=text] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  background:transparent !important;
  border: 0px;
}

【讨论】：

【解决方案13】：

我通常将输入的宽度设置为 99% 来解决这个问题：

input {
    width: 99%;
}

您也可以删除默认样式，但这会使其不那么明显，因为它是一个文本框。但是，无论如何我都会显示代码：

input {
    width: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

广告@m

【讨论】：

【解决方案14】：

问题在于输入元素的border-width。很快，尝试将输入元素的margin-left 设置为-2px。

table input {
  margin-left: -2px;
}

【讨论】：

不这么认为。只是将框向左移动并破坏左边距