Make input text field full width inside table cell

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.


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>

you add width:50%; into table td and expand input width to get rid of space around input

table td input {
 width: 100%;   
}

Tags:

Html

Css