如何调整<输入类型="text" >元素的大小以适合其父元素?



我想将<input>元素放置在<td>内,而不调整<td>元素的大小

这些是我的CSS代码:

td {
border: 2px dashed Silver;
border-radius: 5px;
width: 110px;
height: 55px;
}
td:hover {
cursor: pointer;
}
.seatLabel {
max-width: 100%;
max-height: 100%;
}

我的JavaScript代码:

this.body = document.createElement("td");
this.body.innerHTML = "<input type='text' class='seatLabel'>"

我使用this.body是因为这两个代码在类构造函数中

我该如何解决这个问题?

我试图使用最大宽度最高高度,但它们不起作用。

尝试给您的输入position:relativewidth:100%。因此,它将自动调整td元素中剩余宽度的大小。

请分享您的html代码,以便轻松理解问题?或以下是的解决方案

<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 class="tg">
<tbody>
<tr>
<td class="tg">
<input type="text"/>
</td>
</tr>
</tbody>
</table>
</div>

最新更新