如何移除PHP脚本读取SQL数据库用户记录网页展示时的多余空白区域

看起来你遇到的问题主要是因为每条用户记录都生成了多个独立的<table>元素，再加上浏览器默认的表格样式、废弃的HTML属性以及相对定位的布局影响，才出现了不必要的空白。下面给你几个实用的修复方案：

方案1：合并容器+优化布局（推荐） #

把单条用户的所有信息放进一个父容器里，用浮动代替相对定位，从根源上避免多个表格的默认间距问题，同时让布局更稳定：

<style>
/* 每条用户记录的容器，统一控制间距 */
.user-record {
  width: 435px; /* 主内容350px + 图片80px + 间距5px */
  margin: 0 0 10px 0; /* 只给记录之间保留需要的间距，可按需调整 */
  overflow: hidden; /* 清除浮动带来的布局影响 */
}
/* 统一表格基础样式 */
table {
  border-collapse: collapse;
  border: 1px solid lightblue;
  text-align: left;
  font-family: verdana;
  margin: 0; /* 清除浏览器默认margin */
  padding: 0;
}
.table-a {
  width: 350px;
  background-color: lightblue;
  font-weight: bold;
  font-size: 13px;
}
.table-b {
  width: 350px;
  font-size: 11px;
}
.table-c {
  width: 80px;
  float: right; /* 用浮动代替相对定位，避免占用原位置的空白 */
  margin-left: 5px;
}
th, td {
  border: 1px solid lightblue;
  padding: 0; /* 替换废弃的cell-padding属性 */
}
</style>

<?php
foreach ($pdo->query($sql) as $row) {
    echo "<div class='user-record'>";
    // 头像表格放在前面，让它先浮动
    echo "<table class='table-c'><tr><td><img src='".$row['foto']."' width='80'></td></tr></table>";
    echo "<table class='table-a'><tr><td>".$row['achternaam']."</td><td>".$row['tussenvgsl']."</td><td>".$row['voornaam']."</td><td>".$row['stem']."</td></tr></table>";
    echo "<table class='table-b'><tr><td>".$row['straat']."</td><td></td></tr></table>";
    echo "<table class='table-b'><tr><td>".$row['woonplaats']."</td><td>".$row['postcode']."</td></tr></table>";
    echo "<table class='table-b'><tr><td>Tel: ".$row['telefoon']."</td></tr></table>";
    echo "<table class='table-b'><tr><td>Email: ".$row['email']."</td></tr></table>";
    echo "<table class='table-b'><tr><td>Geb. datum: ".date('d-m-Y', $row['geboortedatum'])."</td><td>Inschrijfdatum: ".date('d-m-Y', $row['inschrijfdatum'])."</td></tr></table>";
    echo "</div>";
}
?>

方案2：仅修改CSS，保留原有HTML结构 #

如果不想调整HTML输出结构，只需要在CSS里重置表格默认样式，修复相对定位的空白问题：

<style>
table {
  border-collapse: collapse;
  border: 1px solid lightblue;
  text-align: left;
  font-family: verdana;
  font-size: 11px;
  margin: 0; /* 关键：清除浏览器默认的表格外边距 */
  padding: 0;
}
table.a {
  table-layout: fixed;
  width: 350px;
  background-color: lightblue;
  font-weight: bold;
  font-size: 13px;
}
table.b {
  table-layout: fixed;
  width: 350px;
}
table.c {
  width: 80px;
  margin-left: 355px;
  top: -105px;
  position: relative;
  margin-top: -105px; /* 抵消相对定位留下的空白高度 */
}
th,td {
  border: 1px solid lightblue;
  padding: 0; /* 替换废弃的cell-padding属性 */
}
</style>

几个关键提醒 #

1. 你用到的cell-padding是废弃的HTML属性，必须改用CSS的padding属性来设置单元格内边距；
2. 相对定位的元素会保留原位置的占位空间，这是导致下方出现空白的核心原因之一，用浮动或者负margin可以解决；
3. 浏览器默认会给<table>添加外边距，重置为margin:0就能消除大部分不必要的空隙。

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