本文详解因html结构错误（如循环内误闭table标签）导致css样式仅作用于表格首行的问题，并提供正确代码结构与最佳实践。

本文详解因html结构错误（如循环内误闭table标签）导致css样式仅作用于表格首行的问题，并提供正确代码结构与最佳实践。

在动态生成HTML表格时，一个常见却极易被忽视的错误是：将 标签错误地置于数据循环内部。这会导致浏览器解析时提前结束表格结构——每迭代一次就关闭一次

，结果仅第一个 被包裹在合法的 中，后续所有行均成为孤立的、未嵌套在表格容器内的 元素。而根据HTML规范，脱离 的 无法被CSS选择器（如 td, th, table tr）正确匹配，因此样式失效。

以下为修正后的完整、语义清晰且安全的PHP+HTML代码：

@@######@@

✅ 关键修正点总结：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

开始标签位于循环外， 闭合标签严格置于循环之后；

使用 和 明确语义结构，提升可访问性与样式控制力；

移除无效的

（ 内不允许直接嵌入换行标签，应通过CSS控制间距）；

安全性增强：改用参数化查询防止SQL注入，并对输出内容使用 htmlspecialchars() 防XSS攻击；

推荐为 添加 border="1" 或对应CSS规则（如 table { border-collapse: collapse; }），便于调试布局。

? 额外建议：

• CSS中可添加 table tr:nth-child(even) { background-color: #f5f5f5; } 实现隔行变色，验证样式是否全局生效；
• 浏览器开发者工具（Elements面板）中检查DOM结构，确认所有

均位于同一 下——这是验证修复效果的最直接方式。

遵循以上结构与规范，即可确保CSS样式稳定、一致地应用于全部数据行。

    <title>IIACSS search center</title><link href="styles.css" rel="stylesheet">

SearchsetAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $str = $_POST["search"]; // ⚠️ 注意：原始代码存在SQL注入风险！应使用参数化查询 $sth = $con->prepare("SELECT * FROM `questions` WHERE question LIKE ?"); $sth->execute(["%{$str}%"]); // 输出表格开始标签（仅一次） echo ''; echo ''; echo ''; while ($row = $sth->fetch(PDO::FETCH_OBJ)) { echo ''; echo ''; echo ''; echo ''; echo ''; } echo '

Project	Question	Sample
' . htmlspecialchars($row->Proj_Name) . '	' . htmlspecialchars($row->Question) . '	' . htmlspecialchars($row->sample) . '

'; // ✅ 表格闭合仅在循环结束后执行 } catch (PDOException $e) { echo "

Error: " . htmlspecialchars($e->getMessage()) . "

"; } } ?>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！