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.
Advertisement
Answer
Try to give your input position:relative
, and width:100%
. So, it will automatically resize to the remaining width in the td element.