Resume the min-width of the tables.

It was lost by mistake while fixing #85

_includes/fixlinenos.html

@@ -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 %}

_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 }}

_layouts/default.html

@@ -36,7 +36,7 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% include fixlinenos.html content=content %}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
 

assets/css/_addon/main.scss

@@ -750,22 +750,24 @@ a {
 
 
 /*--- Begin of Markdown table style ---*/
-
-div.post-content {
-  >table, li>table {
-    min-width: 60%;
-    display: block;
+div.post-content .table-wrapper {
+  overflow-x: auto;
+
+  >table {
+    min-width: 60%;
     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 {
+      th {
+        @extend %table-cell;
+      }
+    }
+
+    tbody {
+      tr {
         &:nth-child(2n) {
           background-color: var(--tb-even-bg);
         }
@@ -775,17 +777,14 @@ table {
         & {
           border-bottom: 1px solid var(--tb-border-color);
         }
-    }
-    th {
+        td {
           @extend %table-cell;
         }
       }
-
-  tbody td {
-    @extend %table-cell;
     }
+  }
+}
 
-} // table
 
 
 /*--- post ---*/

assets/css/_addon/module.scss

@@ -15,7 +15,7 @@
 }
 
 %table-cell {
-  padding: .35rem .8rem;
+  padding: .4rem 1rem;
   font-size: 95%;
 }