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

Question

http://jsfiddle.net/p1my39fh/

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>

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

我怎样才能同时制作 <td>宽度相同吗？

Answer 1

使两者<td> s 具有相同的宽度，您可以设置:

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>