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%);がこれを取り除き、負のマージンで作業しているので、あなたはうまくいくはずです。

トランスフォームは元のバウンディングボックスをそのまま維持します。