HTML表格中的表格
问题描述:
我制作了HTML表格,最后一行包含用于在行中插入信息的表格。但是,他们正在努力,但是,当我开始输入它们时,网站将突出显示稍高于实际表单的表单。这是问题的截图:HTML表格中的表格
下面是最下面一行代码:
...
<tr id="new_row">
<td>New ID will be given automatically</td>
<td><input type="text" id="new_Train_company" v placeholder="Company name"></td>
<td><input type="text" id="new_Destination" placeholder="Destination"></td>
<td><input type="time" id="new_time"></td>
<td>
<select id="new_platform">
<option value = '1'>1</option >
<option value = '2'>2</option >
<option value = '3'>3</option >
<option value = '4'>4</option >
</select>
</td>
<td><input type="date" id="new_date" ></td>
<td><input type="button" id="insert_row" value="Insert Row" onclick="insert_row();"></td>
</tr>
,这里是表的样式:
.table {
width: 1000px;
margin-top: 3%;
position: fixed;
background-color: #FFFFFF;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.table th {
padding: 15px;
text-align: center;
color: #4CAF50;
}
.table td{
align-items: center;
padding: 15px;
text-align: center;
color: #000000;
}`
答
这是由于你的transform: translate(-50%, -50%);
删除这个和负边距工作,你应该没问题。
变换保留了原始的边界框,所以一切都变化了。
我已经删除它,但它没有解决问题。你建议放在那里的保证金值是多少? – ProPall
你在浏览什么? –
我正在使用Chrome浏览器,但理想情况下我希望它可以在Firefox和Safari上工作 – ProPall