diff --git a/_includes/fixlinenos.html b/_includes/fixlinenos.html
deleted file mode 100644
index e7369232a78e6..0000000000000
--- a/_includes/fixlinenos.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--
-  Fixed kramdown code highlight rendering:
-  https://github.com/penibelst/jekyll-compress-html/issues/101
-  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
--->
-{% if include.content contains '<pre class="highlight">' %}
-  {% assign content = include.content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign content = content | replace: '</code></pre>', '</code>' %}
-  {{ content }}
-{% else %}
-  {{ include.content }}
-{% endif %}
diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
new file mode 100644
index 0000000000000..605d24add64df
--- /dev/null
+++ b/_includes/refactor-content.html
@@ -0,0 +1,27 @@
+<!--
+  Refactor the HTML structure.
+-->
+
+{% assign _content = include.content %}
+
+<!--
+  Suroundding the markdown table with '<div class="table-wrapper">. and '</div>'
+-->
+{% if _content contains '<table>' %}
+  {% assign _content = _content | replace: '<table>', '<div class="table-wrapper"><table>' %}
+  {% assign _content = _content | replace: '</table>', '</table></div>' %}
+  {% assign _content = _content | replace: '</table></div></code>', '</table></code>' %}
+{% endif %}
+
+
+<!--
+  Fixed kramdown code highlight rendering:
+  https://github.com/penibelst/jekyll-compress-html/issues/101
+  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+-->
+{% if _content contains '<pre class="highlight">' %}
+  {% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
+  {% assign _content = _content | replace: '</code></pre>', '</code>' %}
+{% endif %}
+
+{{ _content }}
diff --git a/_layouts/default.html b/_layouts/default.html
index 8c78a51f503f1..55463c3ac6a7e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -36,7 +36,7 @@
     <div id="main-wrapper">
       <div id="main">
 
-        {% include fixlinenos.html content=content %}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
 
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index 6ce089c1b6aaa..22fa90d108408 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -750,42 +750,41 @@ a {
 
 
 /*--- Begin of Markdown table style ---*/
+div.post-content .table-wrapper {
+  overflow-x: auto;
 
-div.post-content {
-  >table, li>table {
+  >table {
     min-width: 60%;
-    display: block;
     overflow-x: auto;
-    border-collapse: collapse;
     border-spacing: 0;
     margin-bottom: 1.5rem;
-  }
-}
 
-table {
-  thead {
-    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-    +tbody tr {
-      &:nth-child(2n) {
-        background-color: var(--tb-even-bg);
-      }
-      &:nth-child(2n + 1) {
-        background-color: var(--tb-odd-bg);
+    thead {
+      border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+      th {
+        @extend %table-cell;
       }
-      & {
-        border-bottom: 1px solid var(--tb-border-color);
-      }
-    }
-    th {
-      @extend %table-cell;
     }
-  }
 
-  tbody td {
-    @extend %table-cell;
+    tbody {
+      tr {
+        &:nth-child(2n) {
+          background-color: var(--tb-even-bg);
+        }
+        &:nth-child(2n + 1) {
+          background-color: var(--tb-odd-bg);
+        }
+        & {
+          border-bottom: 1px solid var(--tb-border-color);
+        }
+        td {
+          @extend %table-cell;
+        }
+      }
+    }
   }
+}
 
-} // table
 
 
 /*--- post ---*/
diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss
index 24d276771559a..81fc8eb37d84e 100644
--- a/assets/css/_addon/module.scss
+++ b/assets/css/_addon/module.scss
@@ -15,7 +15,7 @@
 }
 
 %table-cell {
-  padding: .35rem .8rem;
+  padding: .4rem 1rem;
   font-size: 95%;
 }