HTML表格样式失效：为何只有首行生效及正确写法-php教程-PHP中文网

HTML表格样式失效：为何只有首行生效及正确写法

CSS样式未应用到所有表格行，根本原因在于HTML结构错误——标签被错误地放在循环内部，导致每次只渲染一个单行表格，后续行被当作孤立HTML元素而脱离样式作用域。

css样式未应用到所有表格行，根本原因在于html结构错误——``标签被错误地放在循环内部，导致每次只渲染一个单行表格，后续行被当作孤立html元素而脱离样式作用域。

在PHP动态生成HTML表格时，语义结构的完整性直接决定CSS能否正确生效。你当前代码中，闭合标签位于 for 循环体内，这意味着每遍历一条数据库记录，就立即关闭一次

，结果生成了多个不合法的、嵌套混乱的HTML片段（例如：

......

），浏览器会尝试自动修复这些错误，但往往导致后续和脱离上下文，从而无法继承 td { color: black; font-family: sans-serif; } 等样式规则。

✅ 正确做法是：将

开标签置于循环外，

闭标签置于循环结束后，确保所有

都包裹在同一张语义完整的表格内。

以下是修正后的结构化代码（已优化可读性与安全性）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<?php $con = new PDO("mysql:host=localhost;dbname=data", 'root', 'admin123');
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // 推荐启用错误提示

if (isset($_POST["submit"])) {
    $str = trim($_POST["search"]);
    // ⚠️ 注意：原始代码存在严重SQL注入风险！应使用参数化查询
    $sth = $con->prepare("SELECT * FROM `questions` WHERE question LIKE ?");
    $sth->execute(["%$str%"]); // 安全传参
?>

fetch(PDO::FETCH_OBJ)): ?>

Project	Question	Sample
= htmlspecialchars($row->Proj_Name) ?>	= htmlspecialchars($row->Question) ?>	= htmlspecialchars($row->sample) ?>

? 关键修正点说明：

结构修复：和
严格配对，且仅出现一次，所有均为其子元素；
安全增强：改用 ? 占位符 + execute() 参数绑定，彻底杜绝SQL注入；
XSS防护：使用 htmlspecialchars() 输出用户数据，防止脚本注入；
语义升级：引入 / 明确表头与内容分区，提升可访问性与CSS选择器灵活性（如 tbody td）；
冗余清理：移除

（表格单元格内无需换行符，应由CSS控制间距）。

? 小贴士：

浏览器开发者工具（F12 → Elements 面板）可直观验证DOM结构是否合法——检查是否所有都正确嵌套在内；
若仍无效，请确认CSS文件路径正确（建议用绝对路径如 /css/styles.css）、无缓存干扰（Ctrl+F5 强制刷新），并检查是否有更高优先级的CSS规则覆盖了 td 样式。
遵循“结构先行、样式后置、安全贯穿”的原则，即可确保样式稳定应用于全部数据行。

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