点击Div内按钮时表格数据重影问题求助（疑为Div闭合错误）

你的表格首行重影问题确实是HTML结构错误导致的，主要是表格内部嵌套非法元素、标签未正确闭合，以及Modal的DOM层级混乱。下面是具体问题点和修复后的完整代码：

核心问题分析 #

• 表格内非法嵌套：你把<div class="panel-heading">直接放在<table>标签内部，这违反了HTML规范——表格只能包含<thead>、<tbody>、<tr>、<th>、<td>等表格专属元素，面板标题应该放在表格外部的面板容器里。
• 标签未闭合：第一个表头<tr>没有写</tr>闭合标签，浏览器自动补全时出现渲染异常，直接引发首行重影。
• 无效标签残留：代码里有Details </a>和EDIT </a>这类无起始标签的无效<a>，干扰了DOM结构解析。
• Modal层级错误：<div class="modal-footer">被错误嵌套在<modal-body>里，它应该和modal-header、modal-body同级，同属modal-content的子元素。

修复后的完整代码 #

<style>
 .modal-body { 
     max-height: calc(100vh - 210px); 
     overflow-y: auto; 
 } 
</style>
<div class="row">
  <div class="panel panel-default">
    <!-- 面板标题移到正确位置，符合Bootstrap面板结构规范 -->
    <div class="panel-heading">
      <span class="panel-title">
        <span class="fa fa-table"></span><font color="red">ex</font>
      </span>
    </div>
    <div class="panel-body pn">
      <div style="overflow-x:auto;">
        <br>
        <div class="table-responsive mbn">
          <table class="table table-bordered mbn">
            <!-- 表头tr正确闭合，补充缺失的Action表头保证列数一致 -->
            <tr>
              <th><font color="red" size="2">Ref</font></th>
              <th><font color="red" size="2">Da</font></th>
              <th><font color="red" size="2">sined</font></th>
              <th><font color="red" size="2">Action</font></th>
            </tr>
            <tr>
              <td>>></td>
              <td>Details</td>
              <td>EDIT</td>
              <td>
                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal结构修正，确保层级正确 -->
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">List s</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive mbn">
            <table class="table table-bordered mbn">
              <tr>
                <th width="70"><font color="red" size="2">Sl</font></th>
                <th><font color="red" size="2">Name</font></th>
                <th width="90"><font color="red" size="2"></font></th>
              </tr>
              <tr>
                <td>1</td>
                <td>I</td>
                <td>
                  <input type="checkbox" name="assign" value="Bike">
                </td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 模态框 footer 移到正确层级 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-info">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

额外优化建议 #

• 尽量替换<font>标签为CSS样式，比如用style="color: red; font-size: 0.8rem;"，更符合现代前端规范。
• 保持HTML标签的缩进一致性，能更快发现结构类错误。
• 表格的表头列数要和内容列数严格对应，避免出现列错位问题。

内容的提问来源于stack exchange，提问作者user8558464