Author: Marcos 'Marcão' Aurelio (macoaure)
Committer: GitHub (web-flow)
Pusher: saundefined
Date: 2025-02-05T10:51:33+03:00
Commit: Fix table overlapping and improve responsiveness #688 (#1222) · php/web-php@cb9bb53 · GitHub
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);
+ }
+}