CSS: Sticky table headers (fix #918)

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Adminer dev
 - PostgreSQL: Display auto_increment of inserted rows
+- CSS: Sticky table headers (bug #918)
 
 ## Adminer 5.0.6 (released 2025-03-17)
 - Align numbers right (bug #912)

adminer/static/dark.css

@@ -6,7 +6,7 @@ a:visited { color: #517fa8; }
 a:link:hover, a:visited:hover { color: #9bc0e1; }
 h1 { border-color: #5e94c1; color: #ffddbf; background: #154269; }
 h2 { border-color: #a3bdd3; color: #000; background: #3c678d; }
-td, th { border-color: #0e416d; }
+table, td, th { border-color: #0e416d; }
 th { background: #11385a; }
 thead td, thead th { color: #a8b05f; background: #011d35; }
 thead th a { color: #a8b05f; }

adminer/static/default.css

@@ -11,11 +11,13 @@ h2 { font-size: 150%; margin: 0 0 20px -18px; padding: .8em 1em; border-bottom:
 h3 { font-weight: normal; font-size: 130%; margin: 1em 0 0; }
 form { margin: 0; }
 td table { width: 100%; margin: 0; }
-table { margin: 1em 20px 0 0; border-collapse: collapse; font-size: 90%; }
-td, th { border: 1px solid #999; padding: .2em .3em; }
+table { margin: 1em 20px 0 0; font-size: 90%; border-spacing: 0; border-width: 1px 0 0 1px; }
+table, td, th { border-color: #999; border-style: solid; }
+td, th { border-width: 0 1px 1px 0; padding: .2em .3em; margin: 0; }
 th { background: #eee; text-align: left; }
+thead { position: sticky; top: 0; }
 thead th { text-align: center; padding: .2em .5em; }
-thead td, thead th { background: #ddf; } /* position: sticky; causes Firefox to lose borders */
+thead td, thead th { background: #ddf; }
 fieldset { display: inline; vertical-align: top; padding: .5em .8em; margin: .8em .5em 0 0; border: 1px solid #999; }
 p { margin: .8em 20px 0 0; }
 img { vertical-align: middle; border: 0; }

designs/brade/adminer.css

@@ -24,6 +24,7 @@ code{background:#eee;padding:2px 4px;font:16px/20px Courier,monospace}
 code a:hover{background:transparent}
 table{margin:4px 0 8px;border:1px solid #ccc;font-size:inherit}
 tbody tr:hover td,tbody tr:hover th{background:#eee}
+thead { top: 40px; }
 thead tr:hover td,thead tr:hover th{background:#ddd}
 th,td{text-align:left;padding:2px 4px;vertical-align:top;font-weight:normal;border:1px dotted #ccc;border-width:0 0 0 1px;
 margin:0;background:inherit}

designs/esterka/adminer.css

@@ -109,6 +109,10 @@ tbody tr:hover td,tbody tr:hover th{
 	background:#edf4ff
 }
 
+thead{
+	top: 44px;
+}
+
 thead th, thead td {
 	text-align:center;
 	vertical-align:middle;

designs/haeckel/adminer.css

@@ -423,6 +423,9 @@ table {
 	border-radius: 2px !important;
 	box-shadow: 0px 0px 3px rgba(0,0,0,0.30) !important;
 }
+thead {
+	top: 34px;
+}
 thead td, thead th {
 	background: #eee;
 }

designs/mvt/adminer.css

@@ -363,6 +363,10 @@ tbody tr:hover td, tbody tr:hover th {
 	background: #edf4ff
 }
 
+thead {
+	top: 34px;
+}
+
 thead td, thead th {
 	text-align: center;
 	vertical-align: middle;

designs/nette/adminer.css

@@ -161,6 +161,10 @@ th, td {
 	background: #CEE0FC;
 }
 
+thead {
+	top: 40px;
+}
+
 thead th, thead td {
 	background: #F2EEE1;
 	border-color: #D0CDC4;

designs/ng9/adminer.css

@@ -108,6 +108,10 @@ tbody tr:hover td,tbody tr:hover th{
 	background:#edf4ff
 }
 
+thead {
+	top: 46px;
+}
+
 thead th, thead td {
 	text-align:center;
 	vertical-align:middle;

designs/pappu687/adminer.css

@@ -140,6 +140,10 @@ tbody tr:hover td,tbody tr:hover th{
     background:#edf4ff
 }
 
+thead {
+	top: 50px;
+}
+
 thead th, thead td {
     text-align:center;
     vertical-align:middle;

designs/paranoiq/adminer.css

@@ -59,6 +59,8 @@ tr:first-child td, tr:first-child th {
     border-top-width: 0; }
 td:first-child, th:first-child {
     border-left-width: 0; }
+thead {
+	top: -1px; }
 thead td, thead th {
     background-color: #EEE;
     border: none;