CODEWITHSUNDEEP
htmlcss
Minh Tri
Minh Tri

Reputation: 2471

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!

Upvotes: 2

Views: 72

Answers (3)

satwick
satwick

Reputation: 139

<table>
<tr>
<td>sssss</td>
<td width="80px" style="border:1px solid red;"><input type="text" style="width:100px;"/></td>
  
</tr>
<tr>
<td>sssss</td>
<td style="border:1px solid green;" ><input type="text" ></td>
  
</tr>

</table>

Upvotes: 0

Edison Biba
Edison Biba

Reputation: 4423

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

Upvotes: 1

TheDoctor
TheDoctor

Reputation: 2512

You can use the size Attribute of the input element

<td><input type="text" name="text" value="Value" size="20"></td>

Upvotes: 0

Related Questions