在表格单元格内输入文本字段全宽

Question

http://jsfiddle.net/p1my39fh/

＆＃13;

＆＃13;

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

＆＃13;

<table>
    <tr>
        <td><input type="text" size="30"/></td>
        <td>Test Information</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

如何删除<input>周围的空格？

如何使<td>两个宽度相同？

Answer 1

要使两个<td>具有相同的宽度，您可以设置：

table {
    width: 550px;
    table-layout: fixed;
}

要让<input>填充<td>的整个宽度，您可以设置：

input {
    width: 100%;
    box-sizing: border-box;
}

更新了演示：

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>

Answer 2

你加宽度：50％;进入表td并扩展输入宽度以摆脱输入周围的空间

table td input {
 width: 100%;   
}

Answer 3

答案是：

为什么不将td的宽度设置为275px，因为你有一个固定的宽度？ - jp-jee 6月11日16:43

那条评论。

将宽度设置为固定长度对我有用。