phpMyAdmin 慢查询日志分析页的 CSS 定制入口是 css/theme.css，关键样式需通过 #slow_log .sql_code 等组合选择器精准控制，避免修改 common.css 等易被升级覆盖的文件。
phpMyAdmin 慢查询日志分析页的 CSS 文件在哪
phpMyAdmin 的慢查询日志分析页面（即 server/status/monitor.php 中点击“Slow log”标签后加载的内容）本身不提供独立视图模板，它复用的是通用 SQL 查询结果渲染逻辑，样式来自全局 CSS。实际生效的样式文件是 js/vendor/codemirror/lib/codemirror.css（用于日志高亮）和 css/common.css（表格、容器基础样式），但最关键的定制入口在 css/theme.css —— 这是 phpMyAdmin 7+ 版本中主题覆盖的唯一推荐位置。
直接改 css/common.css 或 css/setup.css 会导致升级时被覆盖；theme.css 则会被自动加载且优先级足够高。
- 确认路径：你的 phpMyAdmin 安装目录下
./css/theme.css（若不存在可新建） - 确保 phpMyAdmin 配置中
$cfg['ThemePath']未被强制覆盖（默认即启用） - 修改后必须清空浏览器缓存 + 重启 Web 服务（或至少刷新时按 Ctrl+F5）
如何定位慢查询日志表格的 DOM 结构
慢查询日志在页面中由 <div class="tab" id="slow_log"> 包裹，内部是一个标准 <table class="data">，每行 <tr> 对应一条日志，字段名在 <thead> 中，常见列包括 Start_time、User_host、Query_time、Lock_time、Rows_sent、SQL_text。
关键点：SQL_text 列内容会被包裹进 <pre class="sql_code">，这是 CodeMirror 渲染前的原始容器，配色和排版调整主要发生在这里。
立即学习“PHP免费学习笔记（深入）”；
- 用浏览器 DevTools（F12）选中任意一条日志的 SQL 内容，向上追溯到
<td>→<pre class="sql_code">→<table class="data"> - 不要依赖
.table或.container这类泛化类名——它们影响全局，容易误伤其他页面 - 优先使用组合选择器，例如
#slow_log .data td:nth-child(6)精准控制 SQL_text 列宽度与背景
修改 SQL_text 列的字体、背景与换行行为
默认情况下，<pre class="sql_code"> 使用等宽字体但无背景色，长 SQL 会横向溢出导致滚动条难操作。要改善可读性，重点改三处：
-
#slow_log .sql_code：加background: #f8f9fa;、padding: 8px;、border-radius: 4px;，避免和表格行背景混淆 -
#slow_log .sql_code中禁用white-space: pre;（默认值），改为white-space: pre-wrap;+word-break: break-all;，让超长语句自动折行 - 若想高亮关键字，需配合 CodeMirror 主题（见下一条），纯 CSS 无法实现语法着色；但可调
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;提升可读性
示例片段（写入 css/theme.css）：
#slow_log .sql_code {
background: #f8f9fa;
padding: 6px 10px;
border-radius: 4px;
white-space: pre-wrap;
word-break: break-all;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.9em;
}
CodeMirror 主题不生效？检查 phpMyAdmin 版本与加载顺序
phpMyAdmin 5.2+ 默认用 CodeMirror 5 渲染 SQL，但主题文件（如 js/vendor/codemirror/theme/monokai.css）不会自动应用到慢日志的 <pre> 上——它只对编辑器实例生效。要让日志也带语法色，必须手动初始化一个只读 CodeMirror 实例。
这不是 CSS 能解决的问题，需要 JS 注入。在 ./js/custom.js（若无则新建并确保在 config.inc.php 中通过 $cfg['CustomJS'] = './js/custom.js'; 启用）中添加：
document.addEventListener('DOMContentLoaded', function () {
if (window.location.hash === '#slow_log' || document.getElementById('slow_log')) {
const sqlPre = document.querySelectorAll('#slow_log pre.sql_code');
sqlPre.forEach(function (el) {
if (!el.CodeMirror) {
CodeMirror.fromTextArea(el, {
mode: 'text/x-mysql',
theme: 'monokai',
readOnly: true,
lineNumbers: false,
viewportMargin: Infinity
});
}
});
}
});
注意：theme: 'monokai' 要求对应 CSS 文件已加载（默认 phpMyAdmin 已引入所有内置主题），否则回退到默认样式。
这个 JS 方案的代价是：每次切换到 Slow log 标签都会触发初始化，若日志条目超过 50 条，可能轻微卡顿；建议搭配 debounce 或只处理可视区域内的 pre 元素。
