Add a shortcode for folding rows of a table on small screens

2022-09-10 17:20:54 -07:00
2 changed files with 9 additions and 6 deletions
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -149,10 +149,12 @@ table {
    padding: 0.5rem;
 }

-tr {
-    @include below-container-width {
-        display: flex;
-        flex-direction: column;
+.fold-table + table {
+    tr {
+        @include below-container-width {
+            display: flex;
+            flex-direction: column;
+        }
    }
 }

@@ -160,11 +162,11 @@ td {
    @include below-container-width {
        overflow-x: auto;
    }
-    padding: 0.5rem;
 }

-th {
+td, th {
    padding: 0.5rem;
+    vertical-align: top;
 }

 div.highlight tr {
--- a/layouts/shortcodes/foldtable.html
+++ b/layouts/shortcodes/foldtable.html
@@ -0,0 +1 @@
+<span class="fold-table"></span>