Html 在表格单元格内使输入文本字段全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30786613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make input text field full width inside table cell
提问by DerekConlon
table {
width: 550px;
border-collapse:collapse;
margin: auto;
background-color: #A4A4A4;
border: 2px solid black;
padding: 0;
}
table td {
position: relative;
text-align: center;
border: 2px solid green;
padding: 0;
margin: 0;
}<table>
<tr>
<td><input type="text" size="30"/></td>
<td>Test Information</td>
</tr>
</table>How can I remove the space around the <input>?
我怎样才能消除周围的空间<input>？
How can I make both <td>s to be the same width?
如何使两个<td>s 的宽度相同？
采纳答案by DerekConlon
The answer was:
答案是：
why don't you set the width of td to 275px, since you have a fixed width? – jp-jee Jun 11 at 16:43
为什么不将 td 的宽度设置为 275px，因为您的宽度是固定的？– jp-jee 6 月 11 日 16:43
That comment.
那个评论。
Setting the width to a fixed length worked for me.
将宽度设置为固定长度对我有用。
回答by Stickers
To make both <td>s to have same width, you could set:
要使两个<td>s 具有相同的宽度，您可以设置：
table {
width: 550px;
table-layout: fixed;
}
To have the <input>to fill the entire width of the <td>, you could set:
要<input>填充 的整个宽度<td>，您可以设置：
input {
width: 100%;
box-sizing: border-box;
}
Updated demo:
更新的演示：
table {
width: 550px;
border-collapse:collapse;
margin: auto;
background-color: #A4A4A4;
border: 2px solid black;
table-layout: fixed;
}
td {
text-align: center;
border: 2px solid green;
}
td input {
width: 100%;
box-sizing: border-box;
}<table>
<tr>
<td><input type="text" size="30"/></td>
<td>Test Information</td>
</tr>
</table>回答by Hien Luong
you add width:50%; into table td and expand input width to get rid of space around input
你添加宽度：50%；进入表 td 并扩展输入宽度以消除输入周围的空间
table td input {
width: 100%;
}
