Fixing table and other styles

frontend/components/Document/Document.scss

@@ -1,6 +1,6 @@
 .container {
   width: 100%;
-  padding: 20px;
+  padding: 20px 20px 40px 20px;
 }
 
 .document {
@@ -29,7 +29,54 @@
     }
   }
 
-  pre {
+  // pre {
-    box-shadow: 1px 1px 1px #f5f5f5;
+  //   box-shadow: 1px 1px 1px #f5f5f5;
+  // }
+
+  table {
+    width: 100%;
+    overflow: auto;
+    display: block;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    thead, tbody {
+      width: 100%;
+    }
+
+    thead {
+      tr {
+        border-bottom: 2px solid #eee;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid #eee;
+      }
+    }
+
+    tr {
+      background-color: #fff;
+
+      // &:nth-child(2n) {
+      //   background-color: #f8f8f8;
+      // }
+    }
+
+    th, td {
+      text-align: left;
+      border: 1px 0 solid #eee;
+      padding: 5px 20px 5px 0;
+
+      &:last-child {
+        padding-right: 0;
+        width: 100%;
+      }
+    }
+
+    th {
+      font-weight: bold;
+    }
   }
 }

frontend/styles/base.scss

@@ -87,8 +87,7 @@ blockquote {
 }
 hr {
   width: 75%;
-  margin-top: 1.5em;
+  margin: 3em auto;
-  margin-bottom: 1.5em;
   border: 0;
   border-bottom-width: 1px;
   border-bottom-style: solid;