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%);刪除這個和負邊距工作，你應該沒問題。

變換保留了原始的邊界框，所以一切都變化了。