Correct way to adjust width of input in table

If you want to adjust the width of an input in a table, there is a proper way to do it.

As shown below, first set width: 100%; and then max-width: 500px;. By doing it in this order, the width of the input will stretch and contract as needed, with the maximum width being 500px.

input { 
 width: 100%; 
 max-width: 500px; 
}

Conversely, if width: 500px; is set first and then max-width: 100%;, the width cannot be adjusted as intended. This is because width overrides max-width.

input { 
 width: 500px; 
 max-width: 100%; 
}