How can I resize element to fit its parent element?

I want to place the <input> element inside <td> without the <td> element being resized.

These are my CSS codes:

td {
  border: 2px dashed Silver;
  border-radius: 5px;
  width: 110px;
  height: 55px;
}

td:hover {
  cursor: pointer;
}

.seatLabel {
    max-width: 100%;
    max-height: 100%;
}

My JavaScript codes:

this.body = document.createElement("td");

this.body.innerHTML = "<input type='text' class='seatLabel'>"

I’m using this.body because these two codes are inside the class constructor.

How can I solve this problem?

I tried to use max-width and max-height, but they aren’t working.

Answer

Try to give your input position:relative, and width:100%. So, it will automatically resize to the remaining width in the td element.