我想将<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:relative
和width: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>