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

有谁知道为什么宽度为100％的输入元素会遍历表格的单元格边界。宽度为100％的HTML输入文本框溢出表格单元格

在下面输入框的简单示例中，查看表格的单元格边框，结果非常糟糕。这已经过测试，它的发生方式与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>

来源

2010-03-03 Marco Demaio

我解决了这个问题如果你只是使用表格来表示输入，你可能会在'ul'或'ol'内切换到使用'form'，'label'和'input'。这至少稍微有点语义。当然，即使你坚持使用'table'，你也应该使用'form'。 – 2010-03-03 16:38:46

191

你可以使用CSS3 box-sizing特性包括外部填充和边界：

3210

来源

2011-11-30 14:21:26 pricco

很遗憾，但不幸的是，IE 7并没有正确处理盒子大小。在IE 7中试试以下... http：//www.css3。info/preview/box-sizing /或者查看http://css-tricks.com/box-sizing/ – AnthonyVO 2012-05-22 17:07:04

有同样的问题，发现这个gem – Steoates 2013-01-23 16:05:21

@AnthonyVO：true，IE7的唯一解决方法是添加特定的CSS它使用IE条件注释'<！ - [if lt IE 8]>'和input [type =“text”] {width：95％}' – 2014-02-05 11:47:03

宽度值不考虑边框或填充：

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

您在每侧得到填充的2px的，再加上每边边框1px的。
100％+ 2 *（2px + 1px）= 100％+ 6px，这比父td拥有的100％子内容多。

您的选择：

任何设置box-sizing: border-box;按@pricco's answer;
或使用0边距和填充（避免额外的大小）。

来源

2010-03-03 12:33:54 ANeves

更进一步的高级答案你可以设置填充和边框为0像素，然后100％应该工作。 – Mauro 2010-03-03 16:37:15

确实，即使没有为td设置任何填充 - 非常好。 – ANeves 2010-03-03 16:41:39

此外，如果填充产生了问题，可以使用'text-indent'来模拟文本前端的填充，以及垂直填充的'line-height'（尽管保留垂直填充不会影响反正宽度）。 – 2010-03-03 16:58:31

-2

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

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

来源

2010-09-09 09:11:23

不这么认为。这只是转移盒的左侧和破坏左旁 – 2012-01-13 04:42:27

-4

我有完全相同的问题，解决这样说：

input[type="text"] {width: 95%;}

来源

2011-06-01 12:06:02 pasx

我的钱，这再加上在该领域为中心的输入是去 – 2012-09-17 06:49:07

的问题已被前面所解释的，所以我将只重申：宽度不考虑边框和填充。一个可能的答案没有讨论，但我发现帮助我出了一堆是包装你的输入。下面的代码，我会解释如何帮助在第二：

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

的DIV包裹INPUT没有填充也不具有边框。这是解决方案。一个DIV将扩大到它的容器尺寸，但它也会尊重边界和填充。现在，INPUT将没有问题扩大到其容器的大小，因为它是无边框和无边框的。还要注意DIV的溢出设置为隐藏状态。看起来，默认情况下，项目可能会以默认的可见溢出落在其容器之外。这只是确保输入保持在其容器内，并且不会试图通过。

我已经在Chrome和Fire Fox中测试过了。两者似乎都很好地尊重这个解决方案

UPDATE：因为我刚刚得到一个随机downvote，我想说的是一个更好的方式来处理溢出是CSS3盒大小的属性，通过pricco描述：

.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; 
}

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

来源

2011-06-19 00:03:52

的简短的笔记最好的办法：用'溢出：隐藏;'内容仍然是“捅破通过'以完全相同的方式到达盒子的外部，但它被截断而不是被显示 - 因此它不会与其他内容重叠。 – ANeves 2012-01-25 16:10:24

-1

我平时的我的输入设置宽度为99％，解决这个问题：

input { 
    width: 99%; 
}

您也可以删除默认的样式，但会使其不太明显，这是一个文本框。不过，我会针对反正代码：

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

广告@米

来源

2011-06-19 00:09:52 kirb

的东西像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的填充。这使得输入6px比td小，这就是你想要开始的。

我不确定这个机制，但它的工作原理。

在这个简单的例子中，它也适用于右边距为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>

来源

2011-07-02 09:33:17 Andreas

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

干杯！ :)

来源

2011-07-25 14:33:43 Lucian

你的意思是使用'http：// www.w3.org/TR/html4/strict.dtd'严格？ REF。 http://www.w3.org/QA/2002/04/valid-dtd-list.html无论如何，这不是一个选项，因为现在更改DOCTYPE可能会影响网页中许多其他stuf的呈现。 – 2011-07-25 18:09:18

问题是由于输入元素框模型。我最近在尝试将移动设备的输入保持在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; 
}

给你的输入包装圆角填充等，无论你想为你的输入，然后给予输入宽度100％。你有你的输入很好地填充边界等，但没有恼人的溢出！

来源

2011-11-17 11:53:37 hallodom

我解决了这个问题，开始用@ hallodom的答案。我所有的输入都包含在li的内部，所以我所要做的就是设置li overflow：隐藏它来消除多余的输入溢出。

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

.ie7 input { 
    width:100%; 
}

来源

2012-02-17 16:06:48 chet

使用一些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; 
}

来源

2012-05-22 15:08:55 AnthonyVO

我知道这个问题是3岁，但问题仍然存在，目前的浏览器和人们仍然来到这里。现在的解决方案是calc()：

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

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

来源

2013-10-02 15:14:27 trojan

我通过应用box-sizing:border-box解决了这个问题;到表格单元格本身，除了对输入和包装器做同样的处理。

来源

2014-10-15 20:07:38 Vanco

，而不是这个利润率斗争只是做

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

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

来源

2015-09-19 03:21:28 bortunac

我用这个

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; 
}

来源

2017-06-12 21:47:56

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

回答

相关问题