模态弹窗内用<td>标签展示数据布局错乱，<h6>标签正常求助

在模态弹窗里用<td>标签展示数据时，表格布局直接错乱，但换成<h6>标签展示就一切正常。

以下是我的模态框代码：

<div id="myModal<?php echo $row['id'];
            $x = $row['id'];
            ?>" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                <?php 
                  $records = mysqli_query($conn,"select * from trans where id =  $x ");  
                  while($row = mysqli_fetch_array($records))
                    {
                    ?>                      
                    <!--
                         <td> <?php echo $row['id']; ?></td>
                         <td> <?php echo $row['date']; ?></td>
                         <td> <?php echo $row['invNO']; ?></td>
                         <td> <?php echo $row['income']; ?></td> 
                    --> 
                     
                     <h6>ID : <?php echo $row['id']; ?></h6>
                     <h6>Date : <?php echo $row['date']; ?></h6>
                     <h6>inv No : <?php echo $row['invNO']; ?></h6>
                     <h6>income : <?php echo $row['income']; ?></h6>
                <?php
                    }
                ?>
                </div>
            </div>
        </div>
    </div>

问题原因 #

<td>是表格数据单元格标签，它必须嵌套在<tr>（表格行）内，而<tr>又必须放在<table>（表格）标签里才能正常渲染。直接把<td>放在modal-body的<div>中，破坏了HTML的结构规则，浏览器无法识别这是表格的一部分，自然会导致布局错乱。而<h6>是独立的块级标题元素，不需要依赖父级特定结构，所以能正常显示。

修复方案 #

把注释掉的<td>标签包裹在完整的表格结构里，修改后的代码如下：

<div id="myModal<?php echo $row['id'];
            $x = $row['id'];
            ?>" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                <?php 
                  $records = mysqli_query($conn,"select * from trans where id =  $x ");  
                  while($row = mysqli_fetch_array($records))
                    {
                    ?>                      
                    <table>
                      <tr>
                         <td>ID: <?php echo $row['id']; ?></td>
                         <td>Date: <?php echo $row['date']; ?></td>
                         <td>inv No: <?php echo $row['invNO']; ?></td>
                         <td>income: <?php echo $row['income']; ?></td> 
                      </tr>
                    </table>
                     
                     <!-- <h6>ID : <?php echo $row['id']; ?></h6>
                     <h6>Date : <?php echo $row['date']; ?></h6>
                     <h6>inv No : <?php echo $row['invNO']; ?></h6>
                     <h6>income : <?php echo $row['income']; ?></h6> -->
                <?php
                    }
                ?>
                </div>
            </div>
        </div>
    </div>

如果需要更美观的表格样式，可以给<table>添加Bootstrap类适配模态框：

<table class="table table-bordered">
  <!-- 表格内容 -->
</table>

内容的提问来源于stack exchange，提问作者Al-Iraqi