3 files changed, 30 insertions, 14 deletions
diff --git a/src/css/_partial/_post/_content.scss b/src/css/_partial/_post/_content.scss
index 0e50aed..5628664 100644
--- a/src/css/_partial/_post/_content.scss
+++ b/src/css/_partial/_post/_content.scss
@@ -44,23 +44,27 @@
     max-width: 100%;
   }
 
-  > table {
-    max-width: 100%;
-    margin: 10px 0;
-    border-spacing: 0;
-    box-shadow: 2px 2px 3px rgba(0,0,0,.125);
+  .table-wrapper {
+    overflow-x: auto;
 
-    thead {
-      background: $deputy-color;
-    }
+    > table {
+      max-width: 100%;
+      margin: 10px 0;
+      border-spacing: 0;
+      box-shadow: 2px 2px 3px rgba(0,0,0,.125);
 
-    th, td {
-      padding: 5px 15px;
-      border: 1px double $content-table-border-color;
-    }
+      thead {
+        background: $deputy-color;
+      }
+
+      th, td {
+        padding: 5px 15px;
+        border: 1px double $content-table-border-color;
+      }
 
-    tr:hover {
-      background-color: $deputy-color;
+      tr:hover {
+        background-color: $deputy-color;
+      }
     }
   }
 
diff --git a/src/js/even.js b/src/js/even.js
index e8f8b33..c82eb41 100644
--- a/src/js/even.js
+++ b/src/js/even.js
@@ -266,4 +266,15 @@ Even.sequence = function() {
   }
 };
 
+Even.responsiveTable = function() {
+  const tables = document.querySelectorAll('.post-content > table');
+  for (let i = 0; i < tables.length; i++) {
+    const table = tables[i];
+    const wrapper = document.createElement('div');
+    wrapper.className = 'table-wrapper';
+    table.parentElement.replaceChild(wrapper, table);
+    wrapper.appendChild(table);
+  }
+};
+
 export {Even}
diff --git a/src/js/main.js b/src/js/main.js
index 1dd8566..4554e68 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -9,6 +9,7 @@ $(document).ready(function () {
   Even.fancybox();
 });
 
+Even.responsiveTable();
 Even.flowchart();
 Even.sequence();