added header_separate function based on the suggestion in #541
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index f088dcf..dbb0f4e 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2020-10-05" />
+<meta name="date" content="2020-10-06" />
 
 <title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
 
@@ -6333,7 +6333,7 @@
 
 <h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
 <h4 class="author">Hao Zhu</h4>
-<h4 class="date">2020-10-05</h4>
+<h4 class="date">2020-10-06</h4>
 
 </div>
 
@@ -11328,7 +11328,7 @@
 1
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -11344,7 +11344,7 @@
 3
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -11360,7 +11360,7 @@
 5
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -11403,7 +11403,7 @@
 10
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -11417,7 +11417,7 @@
 11
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -11436,7 +11436,7 @@
 13
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -11452,7 +11452,7 @@
 15
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 </tbody>
@@ -16746,8 +16746,8 @@
 <pre class="r"><code># Not evaluated
 library(sparkline)
 sparkline(0)</code></pre>
-<span id="htmlwidget-b273e58dc9cf32d23728" class="sparkline html-widget"></span>
-<script type="application/json" data-for="htmlwidget-b273e58dc9cf32d23728">{"x":{"values":0,"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script>
+<span id="htmlwidget-6114469567685ebe0b50" class="sparkline html-widget"></span>
+<script type="application/json" data-for="htmlwidget-6114469567685ebe0b50">{"x":{"values":0,"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script>
 <pre class="r"><code>spk_dt &lt;- data.frame(
   var = c(&quot;mpg&quot;, &quot;wt&quot;),
   sparkline = c(spk_chr(mtcars$mpg), spk_chr(mtcars$wt))
@@ -16772,8 +16772,8 @@
 mpg
 </td>
 <td style="text-align:left;">
-<span id="htmlwidget-ff58ca5b629d76fb5d1c" class="sparkline html-widget"></span>
-<script type="application/json" data-for="htmlwidget-ff58ca5b629d76fb5d1c">{"x":{"values":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script>
+<span id="htmlwidget-926649ac136aa8f3326f" class="sparkline html-widget"></span>
+<script type="application/json" data-for="htmlwidget-926649ac136aa8f3326f">{"x":{"values":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script>
 </td>
 </tr>
 <tr>
@@ -16781,8 +16781,8 @@
 wt
 </td>
 <td style="text-align:left;">
-<span id="htmlwidget-a5ea7d5f0f8b0e5e3af5" class="sparkline html-widget"></span>
-<script type="application/json" data-for="htmlwidget-a5ea7d5f0f8b0e5e3af5">{"x":{"values":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script>
+<span id="htmlwidget-42f9c5dad4ac6b3ba181" class="sparkline html-widget"></span>
+<script type="application/json" data-for="htmlwidget-42f9c5dad4ac6b3ba181">{"x":{"values":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script>
 </td>
 </tr>
 </tbody>