[PHP-WEBMASTER] [web-php] master: Fix table overlapping and improve responsiveness #688 (#1222)

[Marcos 'Marcão' Aurelio via GitHub]

Author: Marcos 'Marcão' Aurelio (macoaure)
Committer: GitHub (web-flow)
Pusher: saundefined
Date: 2025-02-05T10:51:33+03:00

Commit: 
https://github.com/php/web-php/commit/cb9bb534caead0180367174e5ade4a860e013de2
Raw diff: 
https://github.com/php/web-php/commit/cb9bb534caead0180367174e5ade4a860e013de2.diff

Fix table overlapping and improve responsiveness #688 (#1222)

Fix #688

Changed paths:
  M  js/common.js
  M  styles/theme-base.css


Diff:

diff --git a/js/common.js b/js/common.js
index a81da820bb..a70f81236f 100644
--- a/js/common.js
+++ b/js/common.js
@@ -819,3 +819,24 @@ function getLanguage() {
         $link.attr('href', $link.attr('href') + window.location.hash);
     });
 })(jQuery);
+
+(function ($) {
+    /**
+     * Each th will dynamically set for the corresponding td the attribute of
+     * "data-label" with the text of the th.
+     */
+    $(document).ready(function () {
+        $('table').each(function () {
+            var $table = $(this);
+            $table.find('th').each(function (index) {
+                var $th = $(this);
+                var text = $th.text();
+                if (text === '') {
+                    return;
+                }
+                $table.find('td:nth-child(' + (index + 1) + ')')
+                    .attr('data-label', text);
+            });
+        });
+    });
+})(jQuery);
diff --git a/styles/theme-base.css b/styles/theme-base.css
index 12f900e9a7..b35a6a43fd 100644
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -1632,3 +1632,55 @@ aside.tips div.inner {
 .caption {
   font-size: 0.85rem;
 }
+
+/**
+* Table overlapping fix
+*/
+.table {
+  width: 100%;
+  margin: 1% !important;
+  border-spacing: 20px;
+  table-layout: fixed;
+}
+
+td {
+  word-wrap: break-word;
+}
+
+@media only screen and (max-width: 760px), (min-device-width: 768px) and 
(max-device-width: 1024px) {
+  /* Make table elements block for stacking */
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+
+  /* Hide the table headers */
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  tr {
+    margin: 0 0 1rem 0;
+  }
+
+  td {
+    border: none;
+    border-bottom: 1px solid #eee;
+    position: relative;
+  }
+  td:before {
+    left: -.50rem;
+    top: -0.3rem;
+    padding: .25rem .5rem;
+    width: 100%;
+    font-weight: bold;
+    border: none;
+    background-color: #C4C9DF;
+    border-bottom: 1px solid #eee;
+    position: relative;
+    display: block;
+    unicode-bidi: isolate;
+    content: attr(data-label);
+  }
+}