diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 2f3154e..396717d 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="2017-10-27" />
+<meta name="date" content="2017-10-31" />
 
 <title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
 
@@ -217,7 +217,7 @@
 
 <h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-27</em></h4>
+<h4 class="date"><em>2017-10-31</em></h4>
 
 </div>
 
@@ -1622,7 +1622,7 @@
 <td style="text-align:left;font-weight: bold;border-right:1px solid;">
 Item 1
 </td>
-<td style="text-align:left;width: 30em; display: inline-block; background-color: yellow;">
+<td style="text-align:left;width: 30em; background-color: yellow;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tempor ex. Morbi malesuada sagittis turpis, at venenatis nisl luctus a.
 </td>
 </tr>
@@ -1630,7 +1630,7 @@
 <td style="text-align:left;font-weight: bold;border-right:1px solid;">
 Item 2
 </td>
-<td style="text-align:left;width: 30em; display: inline-block; background-color: yellow;">
+<td style="text-align:left;width: 30em; background-color: yellow;">
 In eu urna at magna luctus rhoncus quis in nisl. Fusce in velit varius, posuere risus et, cursus augue. Duis eleifend aliquam ante, a aliquet ex tincidunt in.
 </td>
 </tr>
@@ -1638,7 +1638,7 @@
 <td style="text-align:left;font-weight: bold;border-right:1px solid;">
 Item 3
 </td>
-<td style="text-align:left;width: 30em; display: inline-block; background-color: yellow;">
+<td style="text-align:left;width: 30em; background-color: yellow;">
 Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.
 </td>
 </tr>
@@ -2477,7 +2477,7 @@
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">160</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -2494,7 +2494,7 @@
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">160</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -2511,7 +2511,7 @@
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">108</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
 </td>
 </tr>
@@ -2528,7 +2528,7 @@
 <td style="text-align:left;">
 <span style=" font-weight: bold;color: red;">258</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -2545,7 +2545,7 @@
 <td style="text-align:left;">
 <span style=" font-weight: bold;color: red;">360</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
 </td>
 </tr>
@@ -3541,7 +3541,7 @@
 1
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -3549,7 +3549,7 @@
 2
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3589,7 +3589,7 @@
 7
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3608,7 +3608,7 @@
 9
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -3616,7 +3616,7 @@
 10
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -3638,7 +3638,7 @@
 12
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
diff --git a/docs/awesome_table_in_pdf.pdf b/docs/awesome_table_in_pdf.pdf
index fff4882..cdd17fe 100644
--- a/docs/awesome_table_in_pdf.pdf
+++ b/docs/awesome_table_in_pdf.pdf
Binary files differ
diff --git a/docs/kableExtra_in_other_HTML_themes.html b/docs/kableExtra_in_other_HTML_themes.html
index fa4603f..aa741b4 100644
--- a/docs/kableExtra_in_other_HTML_themes.html
+++ b/docs/kableExtra_in_other_HTML_themes.html
@@ -12,7 +12,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-06-09" />
+<meta name="date" content="2017-10-31" />
 
 <title>kableExtra in other rmarkdown HTML themes</title>
 
@@ -71,7 +71,7 @@
 <section class="page-header">
 <h1 class="title toc-ignore project-name">kableExtra in other rmarkdown HTML themes</h1>
 <h4 class="author project-author">Hao Zhu</h4>
-<h4 class="date project-date">2017-06-09</h4>
+<h4 class="date project-date">2017-10-31</h4>
 </section>
 
 
@@ -84,9 +84,10 @@
 <div id="getting-started" class="section level1">
 <h1>Getting Started</h1>
 <p>Here we are using the first few columns and rows from dataset <code>mtcars</code></p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(knitr)
-<span class="kw">library</span>(kableExtra)
-dt &lt;-<span class="st"> </span>mtcars[<span class="dv">1</span>:<span class="dv">5</span>, <span class="dv">1</span>:<span class="dv">6</span>]</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(knitr)</code></pre></div>
+<pre><code>## Warning: package 'knitr' was built under R version 3.4.1</code></pre>
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(kableExtra)
+dt &lt;-<span class="st"> </span>mtcars[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, <span class="dv">1</span><span class="op">:</span><span class="dv">6</span>]</code></pre></div>
 <p>When you are using <code>kable()</code>, if you don’t specify <code>format</code>, by default it will generate a markdown table and let pandoc handle the conversion from markdown to HTML/PDF. This is the most favorable approach to render most simple tables as it is format independent. If you switch from HTML to pdf, you basically don’t need to change anything in your code. However, markdown doesn’t support complex table. For example, if you want to have a double-row header table, markdown just cannot provide you the functionality you need. As a result, when you have such a need, you should <strong>define <code>format</code> in <code>kable()</code></strong> as either “html” or “latex”. <em>You can also define a global option at the beginning using <code>options(knitr.table.format = &quot;html&quot;)</code> so you don’t repeat the step everytime.</em></p>
 <div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">options</span>(<span class="dt">knitr.table.format =</span> <span class="st">&quot;html&quot;</span>) 
 ## If you don't define format here, you'll need put `format = &quot;html&quot;` in every kable function.</code></pre></div>
@@ -241,9 +242,8 @@
 <div id="full-width-or-not" class="section level2">
 <h2>Full Width or Not?</h2>
 <p>By default, a bootstrap table takes 100% of the width. It is supposed to use together with its grid system to scale the table properly. However, when you are writing a rmarkdown document, you probably don’t want to write your own css/or grid. For some small tables with only few columns, a page wide table looks awful. To make it easier, you can specify whether you want the table to have <code>full_width</code> or not in <code>kable_styling</code>. By default, <code>full_width</code> is set to be <code>TRUE</code> for HTML tables (note that for LaTeX, the default is <code>FALSE</code> since I don’t want to change the “common” looks unless you specified it.)</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">kable_styling</span>(<span class="dt">full_width =</span> F)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -391,10 +391,9 @@
 <div id="position" class="section level2">
 <h2>Position</h2>
 <p>Table Position only matters when the table doesn’t have <code>full_width</code>. You can choose to align the table to <code>center</code>, <code>left</code> or <code>right</code> side of the page</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">kable_styling</span>(<span class="dt">full_width =</span> F, <span class="dt">position =</span> <span class="st">&quot;left&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
-<table class="table" style="width: auto !important; text-align: right;">
+<table class="table" style="width: auto !important; ">
 <thead>
 <tr>
 <th style="text-align:left;">
@@ -538,9 +537,8 @@
 </tbody>
 </table>
 <p>Becides these three common options, you can also wrap text around the table using the <code>float-left</code> or <code>float-right</code> options.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">kable_styling</span>(<span class="dt">full_width =</span> F, <span class="dt">position =</span> <span class="st">&quot;float_right&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table" style="width: auto !important; float: right; margin-left: 10px;">
 <thead>
 <tr>
@@ -689,9 +687,8 @@
 <div id="font-size" class="section level2">
 <h2>Font Size</h2>
 <p>If one of your tables is huge and you want to use a smaller font size for that specific table, you can use the <code>font_size</code> option.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">kable_styling</span>(<span class="dt">font_size =</span> <span class="dv">7</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table" style="font-size: 7px; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -840,26 +837,26 @@
 <div id="add-extra-header-rows" class="section level1">
 <h1>Add Extra Header Rows</h1>
 <p>Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into <code>add_header_above()</code>. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the <code>=1</code> part so the function below can be written as `add_header_above(c(&quot; “,”Group 1&quot; = 2, “Group 2” = 2, “Group 3” = 2)).</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span> =<span class="st"> </span><span class="dv">1</span>, <span class="st">&quot;Group 1&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group 2&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group 3&quot;</span> =<span class="st"> </span><span class="dv">2</span>))</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
-<th style="border-bottom:hidden"></th>
+<th style="border-bottom:hidden" colspan="1">
+</th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 1
 </div>
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 2
 </div>
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 3
 </div>
 </th>
@@ -1006,49 +1003,51 @@
 </tbody>
 </table>
 <p>In fact, if you want to add another row of header on top, please feel free to do so.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>, <span class="st">&quot;bordered&quot;</span>)) %&gt;%
-<span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 1&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group 2&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group 3&quot;</span> =<span class="st"> </span><span class="dv">2</span>)) %&gt;%
-<span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 4&quot;</span> =<span class="st"> </span><span class="dv">4</span>, <span class="st">&quot;Group 5&quot;</span> =<span class="st"> </span><span class="dv">2</span>)) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>, <span class="st">&quot;bordered&quot;</span>)) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 1&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group 2&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group 3&quot;</span> =<span class="st"> </span><span class="dv">2</span>)) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 4&quot;</span> =<span class="st"> </span><span class="dv">4</span>, <span class="st">&quot;Group 5&quot;</span> =<span class="st"> </span><span class="dv">2</span>)) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 6&quot;</span> =<span class="st"> </span><span class="dv">6</span>))</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped table-bordered" style="margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
-<th style="border-bottom:hidden"></th>
+<th style="border-bottom:hidden" colspan="1">
+</th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="6">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 6
 </div>
 </th>
 </tr>
 <tr>
-<th style="border-bottom:hidden"></th>
+<th style="border-bottom:hidden" colspan="1">
+</th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="4">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 4
 </div>
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 5
 </div>
 </th>
 </tr>
 <tr>
-<th style="border-bottom:hidden"></th>
+<th style="border-bottom:hidden" colspan="1">
+</th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 1
 </div>
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 2
 </div>
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 3
 </div>
 </th>
@@ -1202,10 +1201,9 @@
 <p>You can also use <code>add_footnote()</code> function from this package. You will need to supply a character vector with each element as one footnote. You may select from <code>number</code>, <code>alphabet</code> and <code>symbol</code> for different types of notations. Example are listed below.</p>
 <div id="alphabet" class="section level3">
 <h3>Alphabet</h3>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_footnote</span>(<span class="kw">c</span>(<span class="st">&quot;Footnote 1&quot;</span>, <span class="st">&quot;Have a good day.&quot;</span>), <span class="dt">notation =</span> <span class="st">&quot;alphabet&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -1364,10 +1362,9 @@
 </div>
 <div id="number" class="section level3">
 <h3>Number</h3>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_footnote</span>(<span class="kw">c</span>(<span class="st">&quot;Footnote 1&quot;</span>, <span class="st">&quot;Have a good day.&quot;</span>), <span class="dt">notation =</span> <span class="st">&quot;number&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -1526,10 +1523,9 @@
 </div>
 <div id="symbol" class="section level3">
 <h3>Symbol</h3>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_footnote</span>(<span class="kw">c</span>(<span class="st">&quot;Footnote 1&quot;</span>, <span class="st">&quot;Footnote 2&quot;</span>, <span class="st">&quot;Footnote 3&quot;</span>), <span class="dt">notation =</span> <span class="st">&quot;symbol&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -1695,28 +1691,28 @@
 <div id="in-table-markers" class="section level2">
 <h2>In-table markers</h2>
 <p>By design, <code>add_footnote()</code> will transform any <code>[note]</code> to in-table footnote markers.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt, <span class="dt">caption =</span> <span class="st">&quot;Demo Table[note]&quot;</span>) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) %&gt;%
-<span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 1[note]&quot;</span> =<span class="st"> </span><span class="dv">3</span>, <span class="st">&quot;Group 2[note]&quot;</span> =<span class="st"> </span><span class="dv">3</span>)) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt, <span class="dt">caption =</span> <span class="st">&quot;Demo Table[note]&quot;</span>) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group 1[note]&quot;</span> =<span class="st"> </span><span class="dv">3</span>, <span class="st">&quot;Group 2[note]&quot;</span> =<span class="st"> </span><span class="dv">3</span>)) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_footnote</span>(<span class="kw">c</span>(<span class="st">&quot;This table is from mtcars&quot;</span>, 
                  <span class="st">&quot;Group 1 contains mpg, cyl and disp&quot;</span>, 
                  <span class="st">&quot;Group 2 contains hp, drat and wt&quot;</span>), 
                <span class="dt">notation =</span> <span class="st">&quot;symbol&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="margin-left: auto; margin-right: auto;">
 <caption>
 Demo Table<sup>*</sup>
 </caption>
 <thead>
 <tr>
-<th style="border-bottom:hidden"></th>
+<th style="border-bottom:hidden" colspan="1">
+</th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="3">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 1<sup>†</sup>
 </div>
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="3">
-<div style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
+<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
 Group 2<sup>‡</sup>
 </div>
 </th>
@@ -1886,11 +1882,10 @@
 <div id="group-rows" class="section level1">
 <h1>Group Rows</h1>
 <p>Sometimes we want a few rows of the table being grouped together. They might be items under the same topic (e.g., animals in one species) or just different data groups for a categorical variable (e.g., age &lt; 40, age &gt; 40). With the new function <code>group_rows()</code> in <code>kableExtra</code>, this kind of task can be completed in one line. Please see the example below. Note that when you count for the start/end rows of the group, you don’t need to count for the header rows nor other group label rows. You only need to think about the row numbers in the “original R dataframe”.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(mtcars[<span class="dv">1</span>:<span class="dv">10</span>, <span class="dv">1</span>:<span class="dv">6</span>], <span class="dt">caption =</span> <span class="st">&quot;Group Rows&quot;</span>) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>, <span class="dt">full_width =</span> F) %&gt;%
-<span class="st">  </span><span class="kw">group_rows</span>(<span class="st">&quot;Group 1&quot;</span>, <span class="dv">4</span>, <span class="dv">7</span>) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(mtcars[<span class="dv">1</span><span class="op">:</span><span class="dv">10</span>, <span class="dv">1</span><span class="op">:</span><span class="dv">6</span>], <span class="dt">caption =</span> <span class="st">&quot;Group Rows&quot;</span>) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>, <span class="dt">full_width =</span> F) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">group_rows</span>(<span class="st">&quot;Group 1&quot;</span>, <span class="dv">4</span>, <span class="dv">7</span>) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">group_rows</span>(<span class="st">&quot;Group 2&quot;</span>, <span class="dv">8</span>, <span class="dv">10</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <caption>
 Group Rows
@@ -1989,13 +1984,13 @@
 2.320
 </td>
 </tr>
-<tr groupLength="4">
+<tr grouplength="4">
 <td colspan="7" style="border-bottom: 1px solid;">
 <strong>Group 1</strong>
 </td>
 </tr>
 <tr>
-<td style="text-align:left; padding-left: 2em;" indentLevel="1">
+<td style="text-align:left; padding-left: 2em;" indentlevel="1">
 Hornet 4 Drive
 </td>
 <td style="text-align:right;">
@@ -2018,7 +2013,7 @@
 </td>
 </tr>
 <tr>
-<td style="text-align:left; padding-left: 2em;" indentLevel="1">
+<td style="text-align:left; padding-left: 2em;" indentlevel="1">
 Hornet Sportabout
 </td>
 <td style="text-align:right;">
@@ -2041,7 +2036,7 @@
 </td>
 </tr>
 <tr>
-<td style="text-align:left; padding-left: 2em;" indentLevel="1">
+<td style="text-align:left; padding-left: 2em;" indentlevel="1">
 Valiant
 </td>
 <td style="text-align:right;">
@@ -2064,7 +2059,7 @@
 </td>
 </tr>
 <tr>
-<td style="text-align:left; padding-left: 2em;" indentLevel="1">
+<td style="text-align:left; padding-left: 2em;" indentlevel="1">
 Duster 360
 </td>
 <td style="text-align:right;">
@@ -2086,7 +2081,7 @@
 3.570
 </td>
 </tr>
-<tr groupLength="3">
+<tr grouplength="3">
 <td colspan="7" style="border-bottom: 1px solid;">
 <strong>Group 2</strong>
 </td>
@@ -2163,10 +2158,9 @@
 </tbody>
 </table>
 <p>For advanced users, you can even define your own css for the group labeling.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>, <span class="dt">full_width =</span> F) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>, <span class="dt">full_width =</span> F) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">group_rows</span>(<span class="st">&quot;Group 1&quot;</span>, <span class="dv">3</span>, <span class="dv">5</span>, <span class="dt">label_row_css =</span> <span class="st">&quot;background-color: #666; color: #fff;&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -2239,7 +2233,7 @@
 2.875
 </td>
 </tr>
-<tr groupLength="3">
+<tr grouplength="3">
 <td colspan="7" style="background-color: #666; color: #fff;">
 <strong>Group 1</strong>
 </td>
@@ -2319,10 +2313,9 @@
 <div id="add-indentation" class="section level1">
 <h1>Add indentation</h1>
 <p>Unlike <code>group_rows()</code>, which will insert a labeling row, sometimes we want to list a few sub groups under a total one. In that case, <code>add_indent()</code> is probably more apporiate. For advanced users, you can even define your own css for the group labeling.</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>, <span class="dt">full_width =</span> F) %&gt;%
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">kable</span>(dt) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="st">&quot;striped&quot;</span>, <span class="dt">full_width =</span> F) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_indent</span>(<span class="kw">c</span>(<span class="dv">1</span>, <span class="dv">3</span>, <span class="dv">5</span>))</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
@@ -2481,11 +2474,10 @@
   )
 )
 
-<span class="kw">kable</span>(text_tbl) %&gt;%
-<span class="st">  </span><span class="kw">kable_styling</span>(<span class="dt">full_width =</span> F) %&gt;%
-<span class="st">  </span><span class="kw">column_spec</span>(<span class="dv">1</span>, <span class="dt">bold =</span> T) %&gt;%
+<span class="kw">kable</span>(text_tbl) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">kable_styling</span>(<span class="dt">full_width =</span> F) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">column_spec</span>(<span class="dv">1</span>, <span class="dt">bold =</span> T) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">column_spec</span>(<span class="dv">2</span>, <span class="dt">width =</span> <span class="st">&quot;30em&quot;</span>)</code></pre></div>
-<?xml version="1.0" encoding="UTF-8" ?>
 <table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 6d5006c..f1347fe 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-10-24" />
+<meta name="date" content="2017-10-31" />
 
 <title>Use kableExtra with formattable</title>
 
@@ -119,7 +119,7 @@
 
 <h1 class="title toc-ignore">Use kableExtra with formattable</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-24</em></h4>
+<h4 class="date"><em>2017-10-31</em></h4>
 
 </div>
 
@@ -148,7 +148,7 @@
 <table class="table table-hover" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
-<th style="border-bottom:hidden">
+<th style="border-bottom:hidden" colspan="1">
 </th>
 <th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
 <div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
@@ -193,7 +193,7 @@
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">160</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -210,7 +210,7 @@
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">160</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -227,7 +227,7 @@
 <td style="text-align:left;">
 <span style=" font-style: italic;color: green;">108</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
 </td>
 </tr>
@@ -244,7 +244,7 @@
 <td style="text-align:left;">
 <span style=" font-weight: bold;color: red;">258</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -261,7 +261,7 @@
 <td style="text-align:left;">
 <span style=" font-weight: bold;color: red;">360</span>
 </td>
-<td style="text-align:left;width: 3cm; display: inline-block; ">
+<td style="text-align:left;width: 3cm; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
 </td>
 </tr>