PHP循环输出SQL查询结果时HTML表格仅首行CSS生效

架构老林

2026-9-3

问题根源

样式仅第一行生效的核心原因是**</table>闭合标签放错了位置**，你把它写在了遍历PDO结果集的for循环内部：

第一次循环执行时，输出完第一行数据的<tr>，就直接把</table>打印出来了，浏览器解析到这里就会判定表格已经结束
后面循环输出的所有<tr>、<td>全部落在表格标签外部，属于不符合HTML嵌套规则的无效元素，根本匹配不上你为表格内td、th写的CSS规则，自然不会应用样式。

另外代码里还有几个会导致渲染异常的不规范写法：

引入CSS的<link>标签放在了<html>和<head>之间，按照HTML规范，所有外部资源引用必须放在<head>内部
<tr>标签里直接写了<br><br>，tr的合法子元素只有td和th，直接插入br属于无效结构，要加行间距直接用CSS的padding控制即可
SQL语句直接拼接用户传入的搜索参数，存在SQL注入风险
你写的for循环里$a变量从头到尾没被使用，用while循环遍历结果集更符合常规写法

修复后代码

首先调整PHP结构，把</table>移到循环外，修正所有不规范的地方：

<!DOCTYPE html>
<html>
<head>
    <!-- 样式表引用移到head内 -->
    <link href="styles.css" rel="stylesheet">
    <title>IIACSS search center</title>
</head>
<body>

<form method="post">
<label>Search</label>
<input type="text" name="search">
<input type="submit" name="submit">
</form>

<?php
$con = new PDO("mysql:host=localhost;dbname=data",'root','admin123');
if (isset($_POST["submit"])) {
$str = $_POST["search"];
// 改用参数绑定，避免SQL注入
$sth = $con->prepare("SELECT * FROM `questions` WHERE question LIKE ?");
$searchParam = "%$str%";
$sth->execute([$searchParam]);

$sth->setFetchMode(PDO::FETCH_OBJ);
?>
<table>
  <tr>
    <th>Project</th>
    <th>Question</th>
    <th>Sample</th>
  </tr>
  <?php
  $hasResult = false;
  // 直接用while遍历结果集，删掉循环内的table闭合标签和无效br标签
  while ($row = $sth->fetch()) {
    $hasResult = true;
  ?>
        <tr>
            <td><?php echo $row->Proj_Name; ?></td>
            <td><?php echo $row->Question;?></td>
            <td><?php echo $row->sample;?></td>
        </tr>
  <?php
  }
  // 可选：无搜索结果时显示提示
  if (!$hasResult) {
    echo "<tr><td colspan='3'>未找到匹配记录</td></tr>";
  }
  ?>
<!-- 表格闭合标签移到循环外部 -->
</table>
<?php
}
?>
</body>
</html>

如果要调整表格内容的行间距，直接在CSS里给td/th加内边距即可，不需要在HTML里插入br标签：

body {
  background-color: white;
}

h1 {
  color: black;
}

td {
  color: black;
  font-family: sans-serif;
  padding: 8px 4px; /* 用内边距控制间距，替代无效的br标签 */
}
th {
  color: blue;
  font-family: sans-serif;
  padding: 8px 4px;
}

修复后右键查看页面源码就能看到，所有数据行的tr标签都被包裹在table标签内部，所有行的样式都会正常生效。

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