html - 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%); 删除它并使用负边距，您应该没问题。

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