如何在<tr>标签内添加div并使其跨表格整行？解决元素浮动问题

你遇到的问题根源在于HTML表格的结构规则：<tr>标签的直接子元素只能是<td>或者<th>，不能直接放<div>这类块级元素。浏览器在解析不符合规范的代码时，会自动把<div>移到表格外部，这就是为什么你的<p>内容跑到表格上方的原因。

要实现div横跨整个表格行的效果，正确的做法是：

• 在<tr>内添加一个<td>元素
• 给这个<td>设置colspan属性，值等于表格的总列数（这样它会自动横跨所有列）
• 把你的<div>放在这个<td>内部

举个具体的代码示例：
假设你的表格原本是3列，代码应该写成这样：

<table>
  <!-- 表格的其他行 -->
  <tr>
    <td colspan="3"> <!-- colspan的值要和表格总列数一致 -->
      <div class="row">
        <p>stuff here</p>
      </div>
    </td>
  </tr>
  <!-- 表格的其他行 -->
</table>

如果需要让div完全填满这个<td>的空间，可以给div加一点基础样式：

.row {
  width: 100%;
  /* 其他你需要的样式，比如背景色、内边距等 */
  background-color: #f0f0f0;
  padding: 8px;
}

这样修改后，你的div就能完美地横跨整个表格行，内容也会正确显示在表格内部了。

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