How can I resize <input type="text"> element to fit its parent element?-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

please share your html code so can easily understand he problem? or Here is a solution

<head>
<style>
    table.tg td{
        text-align: center;
        border: 2px dashed Silver;
        border-radius: 5px;
        width: 100px;
        height: 55px;
        background-color: darksalmon;
    }
    table.tg input{
       width: 70px;
    }
</style>

<body>
<script src="index.js"></script>
<div >
    <table >
        <tbody>
            <tr>
                <td >
                  <input type="text"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>