如何优化phpMyAdmin在窄屏显示器下的横向滚动条显示-phpMyAdmin-PHP中文网

根本原因是.table_container缺少overflow-x:auto且table未设display:block，导致white-space:nowrap失效、字段折行压扁，内容无法溢出；必须加overflow-x:auto、max-width:100%、display:block、-webkit-overflow-scrolling:touch，并对flex父容器设table:flex-shrink:0，css需加!important防js覆盖。

如何优化phpmyadmin在窄屏显示器下的横向滚动条显示

为什么窄屏下表格横向滚动条不出现

根本原因是 .table_container 缺少 overflow-x: auto，浏览器默认裁剪溢出内容；更关键的是，它的子元素 table 没设 display: block，导致 white-space: nowrap 失效，字段名被强制折行，视觉上“没东西可滚”，实际是内容被压扁了。

.table_container 必须加 overflow-x: auto 且 max-width: 100%，否则会撑破父容器或触发整页横向滚动
table 必须设 display: block + white-space: nowrap，否则单元格内文字换行，宽度无法累积
要加 -webkit-overflow-scrolling: touch，不然 iOS 上拖动卡顿、松手即停

如何让滚动条在 Chrome/Safari 里看起来不丑

默认横向滚动条在桌面 Chrome 和 Safari 里又高又粗，还遮挡内容，用 ::-webkit-scrollbar 系列规则能控制样式，但仅对 WebKit 内核生效（Firefox/Edge 不支持，也不影响功能）。

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

只作用于 .table-container 容器，避免全局污染：.table-container::-webkit-scrollbar
横向滚动条用 height 控制厚度（如 8px），纵向用 width
thumb 背景别用纯黑/纯白，#ccc 或 #999 更易识别；加 :hover 提升反馈

.table-container::-webkit-scrollbar {
  height: 8px;
}
.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: #999;
}