Fix the position of the table scroll bar

Author: cotes2020

_includes/refactor-content.html

@@ -4,7 +4,10 @@
 
 {% assign _content = include.content %}
 
-<!-- Suroundding the markdown table with '<div class="table-wrapper">. and '</div>' -->
+<!--
+  In order to allow a wide table to scroll horizontally,
+  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
+-->
 {% if _content contains '<table>' %}
   {% assign _content = _content
     | replace: '<table>', '<div class="table-wrapper"><table>'

assets/css/_addon/main.scss

@@ -771,14 +771,15 @@ img {
 
 
 /*--- Begin of Markdown table style ---*/
-div.post-content .table-wrapper {
+
+.table-wrapper { // it will be created by Liquid
   overflow-x: auto;
+  margin-bottom: 1.5rem;
 
   > table {
     min-width: 100%;
     overflow-x: auto;
     border-spacing: 0;
-    margin-bottom: 1.5rem;
 
     thead {
       border-bottom: solid 2px rgba(210, 215, 217, 0.75);