HTML表格中的表格

Question

我制作了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; 
}` 

Answer 1

这是由于你的transform: translate(-50%, -50%);删除这个和负边距工作，你应该没问题。

变换保留了原始的边界框，所以一切都变化了。