Improved HTML table rendering

fixes #17
TryGhost · Jan 3, 2024 · ebc4792 · ebc4792
1 parent c060944
commit ebc4792
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 33 deletions.
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/built/screen.css.map b/assets/built/screen.css.map
diff --git a/assets/built/source.js b/assets/built/source.js
diff --git a/assets/built/source.js.map b/assets/built/source.js.map
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -2204,51 +2204,42 @@ unless a heading is the very first element in the post content */
     border: 0;
 }
 
-.gh-content table:not(.gist table) {
-    display: inline-block;
-    width: auto;
-    max-width: 100%;
-    overflow-x: auto;
+.gh-content .gh-table {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.gh-content .gh-table table {
+    width: 100%;
     font-family: var(--font-sans);
-    font-size: 1.6rem;
+    font-size: 1.5rem;
     white-space: nowrap;
     vertical-align: top;
     border-spacing: 0;
     border-collapse: collapse;
-    -webkit-overflow-scrolling: touch;
-    background: radial-gradient(ellipse at left, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 75%) 0 center, radial-gradient(ellipse at right, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 75%) 100% center;
-    background-repeat: no-repeat;
-    background-attachment: scroll, scroll;
-    background-size: 10px 100%, 10px 100%;
 }
 
-.gh-content table:not(.gist table) td:first-child {
-    background-image: linear-gradient(to right, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
-    background-repeat: no-repeat;
-    background-size: 20px 100%;
-}
-
-.gh-content table:not(.gist table) td:last-child {
-    background-image: linear-gradient(to left, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
-    background-repeat: no-repeat;
-    background-position: 100% 0;
-    background-size: 20px 100%;
-}
-
-.gh-content table:not(.gist table) th {
+.gh-content .gh-table table th {
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--color-darkgrey);
     text-align: left;
     text-transform: uppercase;
     letter-spacing: 0.2px;
-    background-color: var(--color-white);
 }
 
-.gh-content table:not(.gist table) th,
-.gh-content table:not(.gist table) td {
+.gh-content .gh-table table :is(th, td),
+.gh-content .gh-table table td {
     padding: 6px 12px;
-    border: 1px solid var(--color-light-gray);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.gh-content .gh-table table :is(th, td):first-child {
+    padding-left: 0;
+}
+
+.gh-content .gh-table table :is(th, td):last-child {
+    padding-right: 0;
 }
 
 /* 16. Cards

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -45,4 +45,16 @@
     if (!document.body.classList.contains('home-template') && !document.body.classList.contains('post-template')) {
         pagination();
     }
+})();
+
+/* Responsive HTML table */
+(function () {
+    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');
+    const wrapper = document.createElement('div');
+    wrapper.className = 'gh-table';
+
+    tables.forEach(function (table) {
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+    });
 })();