how to make an element fill the table row - html

Question

I have an element <select> </select> with some <option> </option> in a table row. I want this select to fill all the row space cause some other <input type = "text"> make the row larger than the initial <select> width.
Here is my code to show you the space gap :
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>
If you copy this code you will clearly see the difference between this element. How can I do to make them at the same width please ?

Answer 1

Just add width: 100% to select element:
table tr td select{
width: 100%;
}
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>

Answer 2

In the simplest case, add a width to the select element:
td {
border: 1px dotted blue;
}
select {
width: 100%;
}
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>

Answer 3

Just set the width of <select> to 100% as follows:
*{
margin:0;
padding:0;
}
select{
width:100%;
}
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>

Answer 4

You also can set the element width in css like this:
input, select {
width : 100px;
}