Modified render styles to improve printability

client/public/render-styles.css

@@ -1,9 +1,37 @@
-/* body {
+body {
   font-family: "Open Sans", sans-serif;
   line-height: 1.25;
+  /* padding: 10mm 10mm 10mm 10mm !important; */
+}
+@page {
+  size: auto; /* auto is the initial value */
+
+  /* this affects the margin in the printer settings */
+  margin: 25mm 25mm 25mm 25mm;
+  color: tomato;
+}
+
+/* Unknown whether the below actually gets embedded */
+/* @media print {
+  @page {
+    size: Letter;
+    margin: 0;
+  }
+  html,
+  body {
+    width: 210mm;
+
+    height: 282mm;
+    font-size: 11px;
+    background: #fff;
+    overflow: visible;
+  }
+  body {
+    padding-top: 15mm;
+  }
 } */
 
-table {
+table.imex-table {
   border: 1px solid #ccc;
   border-collapse: collapse;
   margin: 0;
@@ -12,74 +40,25 @@ table {
   table-layout: fixed;
 }
 
-table caption {
+table.imex-table caption {
   font-size: 1.5em;
   margin: 0.5em 0 0.75em;
 }
 
-table tr {
+table.imex-table tr {
   background-color: #f8f8f8;
   border: 1px solid #ddd;
-  padding: 0.35em;
+  padding: 0.1rem;
 }
 
-table th,
-table td {
-  padding: 0.625em;
+table.imex-table th,
+table.imex-table td {
+  padding: 0.3rem;
   text-align: center;
 }
 
-table th {
+table.imex-table th {
   font-size: 0.85em;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
-
-@media screen and (max-width: 600px) {
-  table {
-    border: 0;
-  }
-
-  table caption {
-    font-size: 1.3em;
-  }
-
-  table thead {
-    border: none;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-
-  table tr {
-    border-bottom: 3px solid #ddd;
-    display: block;
-    margin-bottom: 0.625em;
-  }
-
-  table td {
-    border-bottom: 1px solid #ddd;
-    display: block;
-    font-size: 0.8em;
-    text-align: right;
-  }
-
-  table td::before {
-    /*
-    * aria-label has no advantage, it won't be read inside a table
-    content: attr(aria-label);
-    */
-    content: attr(data-label);
-    float: left;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  table td:last-child {
-    border-bottom: 0;
-  }
-}