Privat/Website-fabianschieder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive table scrolling and enhance scrollbar styles for better usability

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-28 22:05:18 +01:00
parent 5af409792d
commit d491c1901f
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
adminer/adminer.css
View File

@ -357,8 +357,26 @@ input[type=number]::-webkit-outer-spin-button {
} }
/* ── TABLE ────────────────────────────────────── */ /* ── TABLE ────────────────────────────────────── */
.table-scroll {
width:100%;
max-width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
border-radius:12px;
}
/* dezente Scrollbar (Chromium/Edge) */
.table-scroll::-webkit-scrollbar { height:10px; }
.table-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:999px; }
.table-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:999px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,.25); }
.db-table { .db-table {
width:100%; border-collapse:collapse; font-size:.85rem; width:100%;
min-width:max-content;
border-collapse:collapse;
font-size:.85rem;
overflow:hidden; overflow:hidden;
} }
.db-table thead th { .db-table thead th {

2
adminer/index.php
View File

@ -494,7 +494,7 @@ function admin_render_table(array $rows, string $table = '', ?string $pkCol = nu
$cols = array_keys((array)$rows[0]); $cols = array_keys((array)$rows[0]);
$hasActions = ($table !== '' && $pkCol !== null && in_array($pkCol, $cols, true)); $hasActions = ($table !== '' && $pkCol !== null && in_array($pkCol, $cols, true));
$html = '<div style="overflow-x:auto"><table class="db-table"><thead><tr>'; $html = '<div class="table-scroll"><table class="db-table"><thead><tr>';
foreach ($cols as $c) $html .= '<th>' . h((string)$c) . '</th>'; foreach ($cols as $c) $html .= '<th>' . h((string)$c) . '</th>';
if ($hasActions) $html .= '<th style="width:1%;white-space:nowrap">Aktionen</th>'; if ($hasActions) $html .= '<th style="width:1%;white-space:nowrap">Aktionen</th>';