From 505da84a2607622e726299f47c6949757dd454dc Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 25 Dec 2020 00:22:21 +0800
Subject: [PATCH] Fix the position of the table scroll bar

---
 _includes/refactor-content.html | 5 ++++-
 assets/css/_addon/main.scss     | 5 +++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 1e44de3..f29d5a2 100644
--- a/_includes/refactor-content.html
+++ b/_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>'
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index 7fa3b5f..8b2adda 100644
--- a/assets/css/_addon/main.scss
+++ b/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);