java - 如图，html在table的tr后面加一条线，为什么会显示在上面？

Question

<table>
            <tr>
            
            银行卡：<br><br>
                <td>商户id&nbsp;&nbsp;&nbsp;<input type="text" style="width:200" name="yh_sh_id" id="" value="<%=yh.getSh_id()==null?"":yh.getSh_id() %>" />
                </td>
                <td>&nbsp;&nbsp;商户key&nbsp;&nbsp;&nbsp;<input type="text" style="width:200" name="yh_sh_key" id="" value="<%=yh.getSh_key()==null?"":yh.getSh_key() %>" />
                </td>
                
            </tr>
            <hr/>
            
                
        </table>

Answer 1

你这个DOM结构的知识有点，不够啊。。
table>[caption|thead>tr|tbody>tr]>[th|td]
理论上table下面只能放这些可见的东西。
可以在Chrome的开发工具中看见hr已经被自动挪到table外面去了。

Answer 2

你可以在下面再加一行，合并单元格，然后hr放在td里

Answer 3

再增加一组tr
<tr><td colspan="4">

---

</td></tr>
如果线不够，就自己调整宽度了。

Answer 4

<table>
    <tr>
        银行卡：<br><br>
        <td>商户id&nbsp;&nbsp;&nbsp;<input type="text" style="width:200" name="yh_sh_id" id="" value="<%=yh.getSh_id()==null?"":yh.getSh_id() %>" /></td>
        <td>&nbsp;&nbsp;商户key&nbsp;&nbsp;&nbsp;<input type="text" style="width:200" name="yh_sh_key" id="" value="<%=yh.getSh_key()==null?"":yh.getSh_key() %>" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <hr/>
        </td>
    </tr>
</table>

Answer 5

别用hr。用CSS边框。
.table{border: none; border-collapse: collapse;}.table td{border-bottom: 1px solid #ccc;}
这样比较好。