javascript - 需要帮助以 html 形式对齐动态 td 元素

Question

我有以下代码:

<tr>    
    <td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
    <td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>

这些 td 元素最初设置为隐藏，仅当我从下拉菜单中选择“失踪人员报告”选项时才会显示。激活这些 td 元素的 Javascript 函数如下:

function checkForChange(that) {
    if (that.value == "missing_person_report") {
        console.log(that.value);
        console.log('person');
        document.getElementById("missing_person_report_label").style.display = "block";  
        document.getElementById("missing_person_report_image").style.display = "block";            
    }
}

代码按预期运行，但 tr 元素的对齐存在问题。这是网页的截图。

我希望 Choose file 与上述所有元素具有相同的对齐方式，即我希望 Choose file 位于 Enter Image 标签的右侧。我该怎么做？

编辑:完整代码可用here :

编辑:那些说我应该将 style 分配给 tr 而不是 td 的人，我已经尝试这样做了。如果我这样做，网页将如下所示:

我希望右边的所有元素都具有相同的对齐方式。

Answer 1

@罗尼思。实际上你将他们的 CSS 作为 block ，所以这就是为什么他们在不同的行上。你应该设置 display = "table-cell"

table {
  width: 100%;
}

td {
 display: table-cell;
}

<table>
  <tr>    
    <td
      id="missing_person_report_label"><b>Enter image</b></td>
    <td
      id="missing_person_report_image"><input type="file"></td>
  </tr>
</table>

P.S.:不要注意 display 在 CSS 中。这只是举例。您应该根据需要从 JS 代码中设置它