commit 82ee3c4040a550ec630604bf44f9afdac532e5cb
author Hao Zhu <haozhu233@gmail.com> Wed Aug 19 20:24:40 2020 -0400
committer Hao Zhu <haozhu233@gmail.com> Wed Aug 19 20:24:40 2020 -0400
tree 2d83ad0990586046a851d1bbfe0880b20e85d70c
parent ab670946eacc2f48f695a007e2ac9052a0f2b345

updated design for classic

docs/awesome_table_in_html.Rmd

diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index 9cca865..71a3331 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -85,8 +85,8 @@
 
 ```{r}
 dt %>%
-  kbl() %>%
-  kable_classic()
+  kbl(caption = "Recreating booktabs style table") %>%
+  kable_classic(full_width = F, html_font = "Cambria")
 ```
 
 ```{r}

docs/awesome_table_in_html.html

diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 2aa9ce2..3bde2c2 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -1346,23 +1346,30 @@
 background-color: #f5f5f5;
 }
 .lightable-classic {
-border-top: 2px solid #111111;
+border-top: 0.16em solid #111111;
 width: 100%;
 margin-bottom: 10px;
+margin: 10px 5px;
+}
+.lightable-classic caption {
+color: #222222;
 }
 .lightable-classic td {
 padding-left: 5px;
 padding-right: 5px;
+color: #222222;
 }
 .lightable-classic th {
 padding-left: 5px;
 padding-right: 5px;
+font-weight: normal;
+color: #222222;
 }
 .lightable-classic thead tr:last-child th {
-border-bottom: 1px solid #111111;
+border-bottom: 0.10em solid #111111;
 }
 .lightable-classic tbody tr:last-child td {
-border-bottom: 2px solid #111111;
+border-bottom: 0.14em solid #111111;
 }
 .lightable-classic.lightable-hover tbody tr:hover {
 background-color: #F9EEC1;
@@ -1375,13 +1382,19 @@
 width: 100%;
 margin-bottom: 10px;
 }
+.lightable-classic-2 caption {
+color: #222222;
+}
 .lightable-classic-2 td {
 padding-left: 5px;
 padding-right: 5px;
+color: #222222;
 }
 .lightable-classic-2 th {
 padding-left: 5px;
 padding-right: 5px;
+font-weight: normal;
+color: #222222;
 }
 .lightable-classic-2 tbody tr:last-child td {
 border-bottom: 3px double #111111;
@@ -2208,9 +2221,12 @@
 </tbody>
 </table>
 <pre class="r"><code>dt %&gt;%
-  kbl() %&gt;%
-  kable_classic()</code></pre>
-<table class=" lightable-classic" style="font-family: &quot;Arial Narrow&quot;, &quot;Source Sans Pro&quot;, sans-serif; margin-left: auto; margin-right: auto;">
+  kbl(caption = &quot;Recreating booktabs style table&quot;) %&gt;%
+  kable_classic(full_width = F, html_font = &quot;Cambria&quot;)</code></pre>
+<table class=" lightable-classic" style="font-family: Cambria; width: auto !important; margin-left: auto; margin-right: auto;">
+<caption>
+Recreating booktabs style table
+</caption>
 <thead>
 <tr>
 <th style="text-align:left;">
@@ -5219,6 +5235,19 @@
 </tr>
 </tbody>
 </table>
+<pre class="r"><code># Or dplyr ver
+# iris[1:10, ] %&gt;%
+#   mutate_if(is.numeric, function(x) {
+#     cell_spec(x, bold = T, 
+#               color = spec_color(x, end = 0.9),
+#               font_size = spec_font_size(x))
+#   }) %&gt;%
+#   mutate(Species = cell_spec(
+#     Species, color = &quot;white&quot;, bold = T,
+#     background = spec_color(1:10, end = 0.9, option = &quot;A&quot;, direction = -1)
+#   )) %&gt;%
+#   kable(escape = F, align = &quot;c&quot;) %&gt;%
+#   kable_styling(c(&quot;striped&quot;, &quot;condensed&quot;), full_width = F)</code></pre>
 </div>
 <div id="text-specification" class="section level2">
 <h2>Text Specification</h2>
@@ -6466,7 +6495,7 @@
 1
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -6474,7 +6503,7 @@
 2
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -6482,7 +6511,7 @@
 3
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -6506,7 +6535,7 @@
 6
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -6514,7 +6543,7 @@
 7
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -6525,7 +6554,7 @@
 8
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -6574,7 +6603,7 @@
 13
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>

inst/lightable-0.0.1/lightable.css

diff --git a/inst/lightable-0.0.1/lightable.css b/inst/lightable-0.0.1/lightable.css
index 6f7a7dd..180bd28 100644
--- a/inst/lightable-0.0.1/lightable.css
+++ b/inst/lightable-0.0.1/lightable.css
@@ -40,27 +40,35 @@
 }
 
 .lightable-classic {
-  border-top: 2px solid #111111;
+  border-top: 0.16em solid #111111;
   width: 100%;
   margin-bottom: 10px;
+  margin: 10px 5px;
+}
+
+.lightable-classic caption {
+  color: #222222;
 }
 
 .lightable-classic td {
   padding-left: 5px;
   padding-right: 5px;
+  color: #222222;
 }
 
 .lightable-classic th {
   padding-left: 5px;
   padding-right: 5px;
+  font-weight: normal;
+  color: #222222;
 }
 
 .lightable-classic thead tr:last-child th {
-  border-bottom: 1px solid #111111;
+  border-bottom: 0.10em solid #111111;
 }
 
 .lightable-classic tbody tr:last-child td {
-  border-bottom: 2px solid #111111;
+  border-bottom: 0.14em solid #111111;
 }
 
 .lightable-classic.lightable-hover tbody tr:hover {
@@ -77,14 +85,21 @@
   margin-bottom: 10px;
 }
 
+.lightable-classic-2 caption {
+  color: #222222;
+}
+
 .lightable-classic-2 td {
   padding-left: 5px;
   padding-right: 5px;
+  color: #222222;
 }
 
 .lightable-classic-2 th {
   padding-left: 5px;
   padding-right: 5px;
+  font-weight: normal;
+  color: #222222;
 }
 
 .lightable-classic-2 tbody tr:last-child td {