It's simple, add this to your CSS file:
input, select, textarea{
width: 100%;
}
Now, with the <input type="text"> you would not see a change because you unduly use a lot, the inline styles , I mean when you put the attribute style on the label html . I suggest grouping all those styles in an external css file, because keeping these styles long is unproductive , it is only recommended (and with its exceptions) for dynamic layout using js or php or some framework. Or in this case to each form tag, you would have to manually add in the attribute style the property width:100% or as in the case you did it in the label <table width="100%" ...
input, select, textarea{
width: 100%;
}
<table width="100%" border="2" bordercolor="red" align="center" style="border-collapse: collapse;">
<tr>
<th bgcolor="red" width="90">MARCA</th>
<th bgcolor="red" width="90">MODELO</th>
</tr>
<td align="center">
<select name="MARCA" id="MARCA" required style="text-align-last: center;">
<option value="">Seleccione...</option>
<option value="MARCA1">MARCA1</option>
<option value="MARCA2">MARCA2</option>
</select>
</td>
<td align="center"><input type="text" name="MODELO" id="MODELO" style="text-align: center;"></td>
<tr>
<th bgcolor="red" width="90">TIPO EQUIPO</th>
<th bgcolor="red" width="90">OBSERVACIONES</th>
</tr>
<td align="center">
<select name="TIPO_EQUIPO" id="TIPO_EQUIPO" required style="border-color: transparent;">
<option value="MEDIDOR">MEDIDOR</option>
<option value="CALIBRADOR">CALIBRADOR</option>
</select>
</td>
<td align="center"><textarea name="OBSERVACIONES" id="OBSERVACIONES"></textarea></td>
Pd: Also, as you suggest in another answer, you could remove the table property width: 100% , but this will only make the table is not responsive, which I do not know if in your design be convenient.
Suggestions (not mandatory)
Another thing that I suggest is to study more about html y css , I see that you use many th tags, obviating that these should be used only within the thead tag and this should only be once in the whole table , so I recommend you use a class in the rows to make these styles in the cells that you will use as headlines. Something like this:
*{box-sizing: border-box;}
.tabla, input, textarea, select{
width: 100%;
}
.tabla{
border: solid 2px red;
margin: auto; /*reemplazando align="center"*/
text-align: center; /*Para que los textos siempre esten centrados*/
border-collapse: collapse;
}
.celda-titulo td{
background-color:red;
width: 90px;
font-weight: bold;
}
#tipo_equipo{
border: none;
}
<table class="tabla">
<tr class="celda-titulo">
<td>MARCA</td>
<td>MODELO</td>
</tr>
<tr>
<td>
<select name="marca" id="marca" required>
<option value="">Seleccione...</option>
<option value="MARCA1">MARCA1</option>
<option value="MARCA2">MARCA2</option>
</select>
</td>
<td>
<input type="text" name="MODELO" id="MODELO"></td>
<tr class="celda-titulo">
<td>TIPO EQUIPO</td>
<td>OBSERVACIONES</td>
</tr>
<td align="center">
<select name="tipo_equipo" id="tipo_equipo" required>
<option value="MEDIDOR">MEDIDOR</option>
<option value="CALIBRADOR">CALIBRADOR</option>
</select>
</td>
<td>
<textarea name="OBSERVACIONES" id="OBSERVACIONES">
</textarea>
</td>
If you notice, if you use a traditional box model 100% of the width, it will present problems in certain parts of overflow, I suggest as I put in the previous demo, that you add the property: box-sizing: border-box; either in the table and all its nested elements, using the selector table, table * or simply with the universal selector, which is considered today a best practice: *{box-sizing: border-box} . If you have any other questions, write me in the comments. Successes!
