table内のinputの幅調整の正しい方法

tableの中にあるinputの幅を調整する場合、適切な方法があります。

以下のように、まず width: 100%; を設定し、次に max-width: 500px; を設定します。この順番にすることで、inputの幅が必要に応じて伸び縮みし、最大幅は500pxとなります。

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

逆に、 width: 500px; を先に設定し、次に max-width: 100%; を設定すると、意図した通りに幅調整ができません。これは、 width が max-width を上書きしてしまうからです。

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