Mar*_*aio 104 html html-table input width
有谁知道为什么宽度为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>
pri*_*cco 210
您可以使用CSS3 box-sizing属性来包含外部填充和边框:
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
ANe*_*ves 24
宽度值不考虑边框或填充:
http://www.htmldog.com/reference/cssproperties/width/
每侧有2px的填充,每边加1px的边框.
100%+ 2*(2px + 1px)= 100%+ 6px,这超过了父td具有的100%子内容.
您可以选择:
box-sizing: border-box;为每@ pricco的答案 ;小智 14
类似的问题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>
之前已经解释过这个问题,所以我只重申:宽度不考虑边框和填充.一个可能的答案没有讨论,但我发现帮助我一堆是你的输入.这是代码,我将在一秒钟内解释这有何帮助:
<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中对此进行了测试.两者似乎都很尊重这个解决方案.
更新:由于我只是一个随机的downvote,我想说一个更好的方法来处理溢出是由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已知问题).