Make input text field full width inside table cell

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>

How can I remove the space around the <input>?

How can I make both <td>s to be the same width?

Answer 1

To make both <td>s to have same width, you could set:

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

To have the <input> to fill the entire width of the <td>, you could set:

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>

Answer 2

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

That comment.

Setting the width to a fixed length worked for me.