需要帮助以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

@Ronith。 实际上，您将其CSS作为块，因此这就是它们分开的原因。您应该设置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代码中进行设置

Answer 2

display:block;使html元素采用其父元素的完整宽度。因此，您将tds用作块级元素，它们占用了所有可用的宽度，而上一个将下一个推入了第二个。

解决方案是不更改其默认显示属性。但是，请尝试使用inline-block或table-cell;，这是表中tds的默认属性。

Answer 3

尝试此操作-将显示内容不应用于tr而不是td，然后从功能显示中再次阻止它

pd.read_csv(file_name, header=None)

功能

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

Answer 4

问题是由于javascript中的display：block引起的。设置显示：在您的JavaScript代码中内联阻止：

val btn = findViewById<View>(R.id.btnlovecal) as Button btn.setOnClickListener { 
    startActivity(
            Intent(this@MainActivity, lovecalculate::class.java)
        ) 
}