Dan9 Dan9 - 3 months ago 8
CSS Question

How to specify cells' width in a table which contains input fields?

A table with input field:



table {
border: 1px solid orange;
border-collapse: collapse;
width: 200px;
}
td {
border: 1px solid orange;
padding: .5em;
}

<table>
<tr>
<td style="width:70%"><label>Key</label></td>
<td>Value</td>
</tr>
<tr>
<td><label for="text">Key</label></td>
<td><input type="text" name="text" value="Value"></td>
</tr>
</table>





And a table without input field:



table {
border: 1px solid orange;
border-collapse: collapse;
width: 200px;
}
td {
border: 1px solid orange;
padding: .5em;
}

<table>
<tr>
<td style="width:70%"><label>Key</label></td>
<td>Value</td>
</tr>
<tr>
<td><label for="text">Key</label></td>
<td>Value</td>
</tr>
</table>





So what is the right way to specify cells' width in this case? Really appreciate your help!

Answer

UPDATEDjsfiddle . You can give the table table-layout: fixed; and then give to td whatever width you want. Also you should give to input type width 100%;

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

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