Adjust print styles for wide side-scrolling tables

Princeton-CDH · Sep 28, 2023 · 7e9b18c · 7e9b18c
1 parent 12e7091
commit 7e9b18c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/themes/startwords/assets/scss/article/_single.scss b/themes/startwords/assets/scss/article/_single.scss
@@ -119,11 +119,13 @@ body.article article, body.page article {
             th {
                 font-weight: 600;
                 padding: 0 0.5rem 0.5rem 0;
+                vertical-align: bottom;
                 }
             // tabular data cells
             td {
                 font-weight: 400;
                 padding: 0.25rem 0.5rem 0.25rem 0;
+                vertical-align: top;
             }
             caption {
                 caption-side: bottom;
@@ -256,7 +258,7 @@ body.article article, body.page article {
         width: 100%;
 
         &.shadow {
-           box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;         
+           box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
         }
 
         /* limit height to avoid scroll traps on mobile */

diff --git a/themes/startwords/assets/scss/print.scss b/themes/startwords/assets/scss/print.scss
@@ -365,4 +365,19 @@ iframe {
         width: 60%;
         margin-left: 20%;
     }
+}
+
+/* adjust styles for larger tables to print */
+body.article article table.side-scroll {
+    width: 8.1in;
+    // max-width: 980px;
+    max-width: 8.1in;  // 8.5 - 0.2 on each side
+    overflow-x: revert;
+    white-space: normal;
+    /* extend sideways beyond the grid even further */
+    margin: 0 -12vw;
+}
+
+table.side-scroll td, table.side-scroll th {
+    white-space: normal;
 }