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