宽度为100%的HTML输入文本框会溢出表格单元格
有人知道为什么宽度为100%的输入元素会越过表格的单元格边框吗 在下面的简单示例中，输入框越过表格的单元格边框，结果非常糟糕。这是经过测试的，在Firefox、IE7和Safari上也是如此 这对你有意义吗？ 我遗漏了什么，你知道可能的解决办法吗宽度为100%的HTML输入文本框会溢出表格单元格,html,input,html-table,width,Html,Input,Html Table,Width,有人知道为什么宽度为100%的输入元素会越过表格的单元格边框吗 在下面的简单示例中，输入框越过表格的单元格边框，结果非常糟糕。这是经过测试的，在Firefox、IE7和Safari上也是如此 这对你有意义吗？ 我遗漏了什么，你知道可能的解决办法吗 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>&
<!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>
测试表中的输入文本
表{边框顶部：1px实心#ff0000；边框左侧：1px实心#ff0000；}
表td{右边框：1px实心#00ff00；下边框：1px实心#00ff00；}
input[type=“text”]{width:100%；}/*删除此选项将使输入不会越过单元格边框，但它们太短，我希望它们适合单元格大小*/
第一栏你好宝贝宝贝宝贝宝贝
第二栏你好宝贝更多
第三栏你好宝贝越来越多
100%+2*（2px+1px）=100%+6px，这比父td具有的100%子内容多 您可以选择：
- 设置<代码>框大小：边框框根据
- 或者使用0边距和填充（避免额外的大小）
边框宽度。
很快，尝试将输入元素的左边距设置为-2px
表格输入{
左边距：-2px；
}
前面已经解释了这个问题，所以我只想重申：宽度不考虑边框和填充。一个可能的答案没有讨论，但我发现它帮了我很多忙，那就是包装你的输入。下面是代码，我马上解释一下这是如何起作用的：
<table>
<tr>
<td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
</tr>
</table>
这似乎得到了主流浏览器的很好支持，并且不像溢出技巧那样“黑客”。但是，当前使用这种方法的浏览器存在一些小问题（请参阅已知问题）。我通常将输入宽度设置为99%以解决此问题：
input {
width: 99%;
}
您还可以删除默认样式，但这将使其不太明显，因为它是一个文本框。但是，无论如何，我都会显示相应的代码：
input {
width: 100%;
border-width: 0;
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Ad@m宽度问题：95%是因为它们在广泛灵活的布局中看起来不合适（因为5%可能会像30像素）
以下解决方案对我来说非常有效（在Firefox、IE 9、Safari中测试）：
（添加颜色以便于注意正确的填充）
诀窍是用两个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>
取出“http://www.w3.org/TR/html4/loose.dtd“从DOCTYPE声明中，它将修复您的问题
干杯！：） 问题是由于输入元素框模型造成的。我最近刚刚找到了一个很好的解决方案，当我尝试将移动设备的输入保持在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;
}
.输入包装器{
边界raius:5px；
填充：10px；
}
.input包装器输入[type=text]{
宽度：100%；
字体大小：16px；
}
输入包装，圆角填充等，无论你想为你的输入，然后给输入宽度100%。你有你的输入填充很好的边界等，但没有恼人的溢出 您可以使用CSS3框大小调整属性来包括外部填充和边框：
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
我用@hallodom的答案解决了这个问题。我所有的输入都包含在li中，所以我所要做的就是设置li溢出：hidden，以消除多余的输入溢出
.ie7 form li {
width:100%;
overflow:hidden;
}
.ie7 input {
width:100%;
}
使用一些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;
}
}
var inputs=document.getElementsByTagName（'input'）；
对于（变量i=0；i
此解决方案的问题包括：
1） 如果您的输入包含在另一个元素（如SPAN）中，则需要循环并找到TD，因为SPANs等元素将包装输入并显示其大小，而不是限制在TD的大小
2） 如果在不同的级别添加了填充或边距，则可能必须从[pEl.offsetWidth]中显式减去该值。取决于可以计算的HTML结构
3） 如果表格列的大小是动态调整的，那么更改一个元素的大小将导致表格在某些浏览器中回流，并且当您依次“修复”输入大小时，可能会得到阶梯效果。解决方案是以百分比或像素的形式为列指定特定的宽度，或者收集新的宽度，然后进行设置。见c
.ie7 form li {
width:100%;
overflow:hidden;
}
.ie7 input {
width:100%;
}
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;
}
}
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;
}
input {
width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}
input{
width:100%;
background:transparent !important;
}
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;
}