add css to table in markdown viewer (#941)

NEAR-DevHub · Sep 24, 2024 · 854de35 · 854de35
1 parent 4ca0f3e
commit 854de35
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/instances/devhub.near/widget/devhub/components/molecule/SimpleMDEViewer.jsx b/instances/devhub.near/widget/devhub/components/molecule/SimpleMDEViewer.jsx
@@ -43,7 +43,34 @@ const code = `
           object-fit:contain;
           width: -webkit-fill-available;
         }
+
+        table {
+          border: 1px solid #dee2e6;
+        }
     
+        table th, table td {
+          padding: 0.75rem;
+          vertical-align: top;
+        }
+
+        table td {
+          border-top: 1px solid #dee2e6;
+        }
+        
+        table thead th {
+          vertical-align: bottom;
+          border-bottom: 2px solid #dee2e6;
+        }
+        
+        table tbody + tbody {
+          border-top: 2px solid #dee2e6;
+        }
+        
+        /* Zebra-striping */
+        tbody tr:nth-of-type(odd) {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+
         ${embeddCSS}
       </style>
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">