update the bookdown guide book
diff --git a/docs/bookdown/01-cross-format.md b/docs/bookdown/01-cross-format.md
index 5fa8c4d..d66f9cf 100644
--- a/docs/bookdown/01-cross-format.md
+++ b/docs/bookdown/01-cross-format.md
@@ -20,81 +20,137 @@
chapter_name: "Chapter "
```
-## Prepare Your Tables for Both Formats
+## Prepare Your Tables for All Formats
In most cases, functions in `kable` and `kableExtra` use the same API to accomplish the same styling task in HTML and LaTeX. However, you also need some format specific settings so your tables will look good in both formats. Some common items here include the `booktabs` and `longtable` settings in `kable` and the `bootstrap_options` and `latex_options` in `kable_styling`.
-Here is an example for a table that will work in both HTML and LaTeX.
+Here is an example for a table that will work in HTML, LaTeX & EPUB.
```r
library(kableExtra)
-options(kableExtra.html.bsTable = T)
-mtcars[1:5, 1:5] %>%
- kable(booktabs = T) %>%
- kable_styling(
- latex_options = c("striped"),
- full_width = F
- ) %>%
- column_spec(1, bold = T) %>%
- add_header_above(c(" ", "Group A" = 2, "Group B" = 3))
+library(dplyr)
```
-<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
+```
+## Warning: package 'dplyr' was built under R version 3.5.1
+```
+
+```
+##
+## Attaching package: 'dplyr'
+```
+
+```
+## The following objects are masked from 'package:stats':
+##
+## filter, lag
+```
+
+```
+## The following objects are masked from 'package:base':
+##
+## intersect, setdiff, setequal, union
+```
+
+```r
+options(kableExtra.html.bsTable = T)
+iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x) {
+ cell_spec(x, bold = T,
+ color = spec_color(x, end = 0.9),
+ font_size = spec_font_size(x))
+ }) %>%
+ mutate(Species = cell_spec(
+ Species, color = "white", bold = T,
+ background = spec_color(1:10, end = 0.9,
+ option = "A", direction = -1)
+ )) %>%
+ kable(escape = F, align = "c", booktabs = T) %>%
+ kable_styling(c("striped", "condensed"),
+ latex_options = "striped",
+ full_width = F)
+```
+
+<table class="table table-striped table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
-<tr>
-<th style="border-bottom:hidden" colspan="1"></th>
-<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="2"><div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">Group A</div></th>
-<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="3"><div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">Group B</div></th>
-</tr>
<tr>
- <th style="text-align:left;"> </th>
- <th style="text-align:right;"> mpg </th>
- <th style="text-align:right;"> cyl </th>
- <th style="text-align:right;"> disp </th>
- <th style="text-align:right;"> hp </th>
- <th style="text-align:right;"> drat </th>
+ <th style="text-align:center;"> Sepal.Length </th>
+ <th style="text-align:center;"> Sepal.Width </th>
+ <th style="text-align:center;"> Petal.Length </th>
+ <th style="text-align:center;"> Petal.Width </th>
+ <th style="text-align:center;"> Species </th>
</tr>
</thead>
<tbody>
<tr>
- <td style="text-align:left;font-weight: bold;"> Mazda RX4 </td>
- <td style="text-align:right;"> 21.0 </td>
- <td style="text-align:right;"> 6 </td>
- <td style="text-align:right;"> 160 </td>
- <td style="text-align:right;"> 110 </td>
- <td style="text-align:right;"> 3.90 </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(40, 174, 128, 1);font-size: 14px;">5.1</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">3.5</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 206, 145, 1);">setosa</span> </td>
</tr>
<tr>
- <td style="text-align:left;font-weight: bold;"> Mazda RX4 Wag </td>
- <td style="text-align:right;"> 21.0 </td>
- <td style="text-align:right;"> 6 </td>
- <td style="text-align:right;"> 160 </td>
- <td style="text-align:right;"> 110 </td>
- <td style="text-align:right;"> 3.90 </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(72, 34, 116, 1);font-size: 9px;">3</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 160, 109, 1);">setosa</span> </td>
</tr>
<tr>
- <td style="text-align:left;font-weight: bold;"> Datsun 710 </td>
- <td style="text-align:right;"> 22.8 </td>
- <td style="text-align:right;"> 4 </td>
- <td style="text-align:right;"> 108 </td>
- <td style="text-align:right;"> 93 </td>
- <td style="text-align:right;"> 3.85 </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(57, 87, 140, 1);font-size: 10px;">4.7</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(56, 88, 140, 1);font-size: 10px;">3.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(246, 110, 92, 1);">setosa</span> </td>
</tr>
<tr>
- <td style="text-align:left;font-weight: bold;"> Hornet 4 Drive </td>
- <td style="text-align:right;"> 21.4 </td>
- <td style="text-align:right;"> 6 </td>
- <td style="text-align:right;"> 258 </td>
- <td style="text-align:right;"> 110 </td>
- <td style="text-align:right;"> 3.08 </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(222, 73, 104, 1);">setosa</span> </td>
</tr>
<tr>
- <td style="text-align:left;font-weight: bold;"> Hornet Sportabout </td>
- <td style="text-align:right;"> 18.7 </td>
- <td style="text-align:right;"> 8 </td>
- <td style="text-align:right;"> 360 </td>
- <td style="text-align:right;"> 175 </td>
- <td style="text-align:right;"> 3.15 </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(41, 175, 127, 1);font-size: 14px;">3.6</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(183, 55, 121, 1);">setosa</span> </td>
+ </tr>
+ <tr>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">5.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">3.9</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">1.7</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">0.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(140, 41, 129, 1);">setosa</span> </td>
+ </tr>
+ <tr>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(34, 168, 132, 1);font-size: 13px;">0.3</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(100, 26, 128, 1);">setosa</span> </td>
+ </tr>
+ <tr>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(60, 15, 112, 1);">setosa</span> </td>
+ </tr>
+ <tr>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(20, 14, 54, 1);">setosa</span> </td>
+ </tr>
+ <tr>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span> </td>
+ <td style="text-align:center;"> <span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(0, 0, 4, 1);">setosa</span> </td>
</tr>
</tbody>
</table>
diff --git a/docs/bookdown/02-bootstrap_in_gitbook.md b/docs/bookdown/02-bootstrap_in_gitbook.md
index 3307859..68f84ed 100644
--- a/docs/bookdown/02-bootstrap_in_gitbook.md
+++ b/docs/bookdown/02-bootstrap_in_gitbook.md
@@ -86,7 +86,7 @@
```
## Epub
-Right now, it's impossible to load addition CSS through HTML dependency (due to a setting in rmarkdown). I will file an issue in `rmarkdown` and see if this is something that can be changed. In the mean time, to use bootstrap tables in Epub, you will have to manually load [this stylesheet](https://github.com/haozhu233/kableExtra/blob/master/inst/bootstrapTable-3.3.7/bootstrapTable.min.css) by putting it to a CSS file (such as "style.css") and load it in `_output.yml`. For example,
+Right now, it's impossible to load addition CSS through HTML dependency and this mechanism exists for a reason ( [See this issue I filed](https://github.com/rstudio/rmarkdown/issues/1457) ). You will have to manually load [this stylesheet](https://github.com/haozhu233/kableExtra/blob/master/inst/bootstrapTable-3.3.7/bootstrapTable.min.css) by putting it to a CSS file (such as "style.css") and load it in `_output.yml`. For example,
```
bookdown::epub_book:
diff --git a/docs/bookdown/bookdown_example.epub b/docs/bookdown/bookdown_example.epub
index 6926269..f7203ee 100644
--- a/docs/bookdown/bookdown_example.epub
+++ b/docs/bookdown/bookdown_example.epub
Binary files differ
diff --git a/docs/bookdown/bookdown_example.pdf b/docs/bookdown/bookdown_example.pdf
index f7394fd..9b3195c 100644
--- a/docs/bookdown/bookdown_example.pdf
+++ b/docs/bookdown/bookdown_example.pdf
Binary files differ
diff --git a/docs/bookdown/bookdown_example.tex b/docs/bookdown/bookdown_example.tex
index 2a320f1..61f7922 100644
--- a/docs/bookdown/bookdown_example.tex
+++ b/docs/bookdown/bookdown_example.tex
@@ -125,7 +125,7 @@
\postauthor{\par}
\predate{\centering\large\emph}
\postdate{\par}
- \date{2018-10-04}
+ \date{2018-10-23}
\usepackage{booktabs}
\usepackage{booktabs}
@@ -162,7 +162,7 @@
this example.
This book is hosted at
-\url{https://github.com/haozhu233/kableExtra/tree/master/docs}.
+\url{https://haozhu233.github.io/kableExtra/bookdown/index.html}
You can download PDF \& EPUB to see the results of kableExtra in those
formats using the same code.
@@ -212,9 +212,9 @@
chapter_name: "Chapter "
\end{verbatim}
-\hypertarget{prepare-your-tables-for-both-formats}{%
-\section{Prepare Your Tables for Both
-Formats}\label{prepare-your-tables-for-both-formats}}
+\hypertarget{prepare-your-tables-for-all-formats}{%
+\section{Prepare Your Tables for All
+Formats}\label{prepare-your-tables-for-all-formats}}
In most cases, functions in \texttt{kable} and \texttt{kableExtra} use
the same API to accomplish the same styling task in HTML and LaTeX.
@@ -224,38 +224,77 @@
the \texttt{bootstrap\_options} and \texttt{latex\_options} in
\texttt{kable\_styling}.
-Here is an example for a table that will work in both HTML and LaTeX.
+Here is an example for a table that will work in HTML, LaTeX \& EPUB.
\begin{Shaded}
\begin{Highlighting}[]
\KeywordTok{library}\NormalTok{(kableExtra)}
-\NormalTok{mtcars[}\DecValTok{1}\OperatorTok{:}\DecValTok{5}\NormalTok{, }\DecValTok{1}\OperatorTok{:}\DecValTok{5}\NormalTok{] }\OperatorTok{%>%}
-\StringTok{ }\KeywordTok{kable}\NormalTok{(}\DataTypeTok{booktabs =}\NormalTok{ T) }\OperatorTok{%>%}\StringTok{ }
-\StringTok{ }\KeywordTok{kable_styling}\NormalTok{(}
- \DataTypeTok{latex_options =} \KeywordTok{c}\NormalTok{(}\StringTok{"striped"}\NormalTok{),}
- \DataTypeTok{full_width =}\NormalTok{ F}
-\NormalTok{ ) }\OperatorTok{%>%}
-\StringTok{ }\KeywordTok{column_spec}\NormalTok{(}\DecValTok{1}\NormalTok{, }\DataTypeTok{bold =}\NormalTok{ T) }\OperatorTok{%>%}
-\StringTok{ }\KeywordTok{add_header_above}\NormalTok{(}\KeywordTok{c}\NormalTok{(}\StringTok{" "}\NormalTok{, }\StringTok{"Group A"}\NormalTok{ =}\StringTok{ }\DecValTok{2}\NormalTok{, }\StringTok{"Group B"}\NormalTok{ =}\StringTok{ }\DecValTok{3}\NormalTok{))}
+\KeywordTok{library}\NormalTok{(dplyr)}
+\end{Highlighting}
+\end{Shaded}
+
+\begin{verbatim}
+## Warning: package 'dplyr' was built under R version 3.5.1
+\end{verbatim}
+
+\begin{verbatim}
+##
+## Attaching package: 'dplyr'
+\end{verbatim}
+
+\begin{verbatim}
+## The following objects are masked from 'package:stats':
+##
+## filter, lag
+\end{verbatim}
+
+\begin{verbatim}
+## The following objects are masked from 'package:base':
+##
+## intersect, setdiff, setequal, union
+\end{verbatim}
+
+\begin{Shaded}
+\begin{Highlighting}[]
+\KeywordTok{options}\NormalTok{(}\DataTypeTok{kableExtra.html.bsTable =}\NormalTok{ T)}
+\NormalTok{iris[}\DecValTok{1}\OperatorTok{:}\DecValTok{10}\NormalTok{, ] }\OperatorTok{%>%}
+\StringTok{ }\KeywordTok{mutate_if}\NormalTok{(is.numeric, }\ControlFlowTok{function}\NormalTok{(x) \{}
+ \KeywordTok{cell_spec}\NormalTok{(x, }\DataTypeTok{bold =}\NormalTok{ T, }
+ \DataTypeTok{color =} \KeywordTok{spec_color}\NormalTok{(x, }\DataTypeTok{end =} \FloatTok{0.9}\NormalTok{),}
+ \DataTypeTok{font_size =} \KeywordTok{spec_font_size}\NormalTok{(x))}
+\NormalTok{ \}) }\OperatorTok{%>%}
+\StringTok{ }\KeywordTok{mutate}\NormalTok{(}\DataTypeTok{Species =} \KeywordTok{cell_spec}\NormalTok{(}
+\NormalTok{ Species, }\DataTypeTok{color =} \StringTok{"white"}\NormalTok{, }\DataTypeTok{bold =}\NormalTok{ T,}
+ \DataTypeTok{background =} \KeywordTok{spec_color}\NormalTok{(}\DecValTok{1}\OperatorTok{:}\DecValTok{10}\NormalTok{, }\DataTypeTok{end =} \FloatTok{0.9}\NormalTok{, }
+ \DataTypeTok{option =} \StringTok{"A"}\NormalTok{, }\DataTypeTok{direction =} \DecValTok{-1}\NormalTok{)}
+\NormalTok{ )) }\OperatorTok{%>%}
+\StringTok{ }\KeywordTok{kable}\NormalTok{(}\DataTypeTok{escape =}\NormalTok{ F, }\DataTypeTok{align =} \StringTok{"c"}\NormalTok{, }\DataTypeTok{booktabs =}\NormalTok{ T) }\OperatorTok{%>%}
+\StringTok{ }\KeywordTok{kable_styling}\NormalTok{(}\KeywordTok{c}\NormalTok{(}\StringTok{"striped"}\NormalTok{, }\StringTok{"condensed"}\NormalTok{), }
+ \DataTypeTok{latex_options =} \StringTok{"striped"}\NormalTok{, }
+ \DataTypeTok{full_width =}\NormalTok{ F)}
\end{Highlighting}
\end{Shaded}
\begin{table}[H]
\centering\rowcolors{2}{gray!6}{white}
-\begin{tabular}{>{\bfseries}lrrrrr}
+\begin{tabular}{ccccc}
\hiderowcolors
\toprule
-\multicolumn{1}{c}{ } & \multicolumn{2}{c}{Group A} & \multicolumn{3}{c}{Group B} \\
-\cmidrule(l{3pt}r{3pt}){2-3} \cmidrule(l{3pt}r{3pt}){4-6}
- & mpg & cyl & disp & hp & drat\\
+Sepal.Length & Sepal.Width & Petal.Length & Petal.Width & Species\\
\midrule
\showrowcolors
-Mazda RX4 & 21.0 & 6 & 160 & 110 & 3.90\\
-Mazda RX4 Wag & 21.0 & 6 & 160 & 110 & 3.90\\
-Datsun 710 & 22.8 & 4 & 108 & 93 & 3.85\\
-Hornet 4 Drive & 21.4 & 6 & 258 & 110 & 3.08\\
-Hornet Sportabout & 18.7 & 8 & 360 & 175 & 3.15\\
+\bgroup\fontsize{14}{16}\selectfont \textcolor[HTML]{28AE80}{\textbf{5.1}}\egroup{} & \bgroup\fontsize{13}{15}\selectfont \textcolor[HTML]{1F9A8A}{\textbf{3.5}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{3E4B8A}{\textbf{1.4}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{FECE91}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{4.9}}\egroup{} & \bgroup\fontsize{9}{11}\selectfont \textcolor[HTML]{482274}{\textbf{3}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{3E4B8A}{\textbf{1.4}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{FEA06D}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{39578C}{\textbf{4.7}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{38588C}{\textbf{3.2}}\egroup{} & \bgroup\fontsize{8}{10}\selectfont \textcolor[HTML]{440154}{\textbf{1.3}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{F66E5C}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{433E85}{\textbf{4.6}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{433E85}{\textbf{3.1}}\egroup{} & \bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{1.5}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{DE4968}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{13}{15}\selectfont \textcolor[HTML]{1F9A8A}{\textbf{5}}\egroup{} & \bgroup\fontsize{14}{16}\selectfont \textcolor[HTML]{29AF7F}{\textbf{3.6}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{3E4B8A}{\textbf{1.4}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{B73779}{\textcolor{white}{\textbf{setosa}}}\\
+\addlinespace
+\bgroup\fontsize{16}{18}\selectfont \textcolor[HTML]{BBDF27}{\textbf{5.4}}\egroup{} & \bgroup\fontsize{16}{18}\selectfont \textcolor[HTML]{BBDF27}{\textbf{3.9}}\egroup{} & \bgroup\fontsize{16}{18}\selectfont \textcolor[HTML]{BBDF27}{\textbf{1.7}}\egroup{} & \bgroup\fontsize{16}{18}\selectfont \textcolor[HTML]{BBDF27}{\textbf{0.4}}\egroup{} & \cellcolor[HTML]{8C2981}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{433E85}{\textbf{4.6}}\egroup{} & \bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{3.4}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{3E4B8A}{\textbf{1.4}}\egroup{} & \bgroup\fontsize{13}{15}\selectfont \textcolor[HTML]{22A884}{\textbf{0.3}}\egroup{} & \cellcolor[HTML]{641A80}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{13}{15}\selectfont \textcolor[HTML]{1F9A8A}{\textbf{5}}\egroup{} & \bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{3.4}}\egroup{} & \bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{1.5}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{3C0F70}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{8}{10}\selectfont \textcolor[HTML]{440154}{\textbf{4.4}}\egroup{} & \bgroup\fontsize{8}{10}\selectfont \textcolor[HTML]{440154}{\textbf{2.9}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{3E4B8A}{\textbf{1.4}}\egroup{} & \bgroup\fontsize{11}{13}\selectfont \textcolor[HTML]{35608D}{\textbf{0.2}}\egroup{} & \cellcolor[HTML]{140E36}{\textcolor{white}{\textbf{setosa}}}\\
+\bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{4.9}}\egroup{} & \bgroup\fontsize{10}{12}\selectfont \textcolor[HTML]{433E85}{\textbf{3.1}}\egroup{} & \bgroup\fontsize{12}{14}\selectfont \textcolor[HTML]{25838E}{\textbf{1.5}}\egroup{} & \bgroup\fontsize{8}{10}\selectfont \textcolor[HTML]{440154}{\textbf{0.1}}\egroup{} & \cellcolor[HTML]{000004}{\textcolor{white}{\textbf{setosa}}}\\
\bottomrule
\end{tabular}
\rowcolors{2}{white}{white}
@@ -269,7 +308,7 @@
\section{Gitbook}\label{gitbook}}
Most of \texttt{kableExtra} tricks will work in \texttt{bookdown} except
-those requires \href{http://getbootstrap.com/}{\texttt{bootstrap}}. By
+those requiring \href{http://getbootstrap.com/}{\texttt{bootstrap}}. By
default, \texttt{rmarkdown} won't load \texttt{bootstrap} for you on
gitbook as it's not necesary. In \texttt{kableExtra}, I used the
\href{https://getbootstrap.com/docs/3.3/customize/}{bootstrap 3.3.7
@@ -279,13 +318,13 @@
\begin{Shaded}
\begin{Highlighting}[]
\KeywordTok{library}\NormalTok{(kableExtra)}
+\KeywordTok{options}\NormalTok{(}\DataTypeTok{kableExtra.html.bsTable =}\NormalTok{ T)}
\NormalTok{mtcars[}\DecValTok{1}\OperatorTok{:}\DecValTok{5}\NormalTok{, }\DecValTok{1}\OperatorTok{:}\DecValTok{5}\NormalTok{] }\OperatorTok{%>%}
\StringTok{ }\KeywordTok{kable}\NormalTok{(}\DataTypeTok{booktabs =}\NormalTok{ T) }\OperatorTok{%>%}\StringTok{ }
\StringTok{ }\KeywordTok{kable_styling}\NormalTok{(}
\DataTypeTok{bootstrap_options =} \KeywordTok{c}\NormalTok{(}\StringTok{"striped"}\NormalTok{,}\StringTok{"hover"}\NormalTok{, }\StringTok{"bordered"}\NormalTok{, }\StringTok{"condensed"}\NormalTok{),}
- \DataTypeTok{latex_options =} \KeywordTok{c}\NormalTok{(}\StringTok{"striped"}\NormalTok{),}
- \DataTypeTok{full_width =}\NormalTok{ F}
+ \DataTypeTok{latex_options =} \KeywordTok{c}\NormalTok{(}\StringTok{"striped"}\NormalTok{)}
\NormalTok{ ) }\OperatorTok{%>%}
\StringTok{ }\KeywordTok{column_spec}\NormalTok{(}\DecValTok{1}\NormalTok{, }\DataTypeTok{color =} \StringTok{"red"}\NormalTok{) }\OperatorTok{%>%}
\StringTok{ }\KeywordTok{add_header_above}\NormalTok{(}\KeywordTok{c}\NormalTok{(}\StringTok{" "}\NormalTok{, }\StringTok{"Group A"}\NormalTok{ =}\StringTok{ }\DecValTok{2}\NormalTok{, }\StringTok{"Group B"}\NormalTok{ =}\StringTok{ }\DecValTok{3}\NormalTok{))}
@@ -313,23 +352,26 @@
\rowcolors{2}{white}{white}
\end{table}
-However, very unfortunately, as we can see, the \texttt{hover} part is
-not working and the table still looks different from a regular bootstrap
-table. The reason is that gitbook defines its own way to style tables
-and some of its rules are conflicting with the one defined in bootstrap.
-For css, it's like once you load something, it's impossible to really
-unload it. As a result, unless there are some changes in
-\texttt{bookdown} (for example, we can replace the gitbook table part
-with bootstrap tables), there is nothing we can do here.
+\textbf{One very important note} here is that by default bookdown loads
+the gitbook table css on start up. It has some conflicts with
+\texttt{bootstrap} tables. As a result, some features like
+\texttt{hover} won't be able to work by default. To solve this problem,
+you need to use the latest version of \texttt{bookdown} (version
+\textgreater{}= 0.7.21) and turn off the \texttt{table\_css} option
+under \texttt{bookdown::gitbook} in \texttt{\_output.yml}
+
+\begin{verbatim}
+bookdown::gitbook:
+ table_css: false
+\end{verbatim}
\hypertarget{epub}{%
\section{Epub}\label{epub}}
Right now, it's impossible to load addition CSS through HTML dependency
-(due to a setting in rmarkdown). I will file an issue in
-\texttt{rmarkdown} and see if this is something that can be changed. In
-the mean time, to use bootstrap tables in Epub, you will have to
-manually load
+and this mechanism exists for a reason (
+\href{https://github.com/rstudio/rmarkdown/issues/1457}{See this issue I
+filed} ). You will have to manually load
\href{https://github.com/haozhu233/kableExtra/blob/master/inst/bootstrapTable-3.3.7/bootstrapTable.min.css}{this
stylesheet} by putting it to a CSS file (such as ``style.css'') and load
it in \texttt{\_output.yml}. For example,
diff --git a/docs/bookdown/cross-format-tables-in-bookdown.html b/docs/bookdown/cross-format-tables-in-bookdown.html
index 57f28c7..f73d627 100644
--- a/docs/bookdown/cross-format-tables-in-bookdown.html
+++ b/docs/bookdown/cross-format-tables-in-bookdown.html
@@ -25,7 +25,7 @@
<meta name="author" content="Hao Zhu">
-<meta name="date" content="2018-10-16">
+<meta name="date" content="2018-10-23">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -132,7 +132,7 @@
<li class="chapter" data-level="1" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i><b>1</b> Introduction</a></li>
<li class="chapter" data-level="2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html"><i class="fa fa-check"></i><b>2</b> Cross-format Tables in Bookdown</a><ul>
<li class="chapter" data-level="2.1" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#use-the-k-m-approach-instead-of-m-k"><i class="fa fa-check"></i><b>2.1</b> Use the “K-M” approach instead of “M-K”</a></li>
-<li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-both-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for Both Formats</a></li>
+<li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-all-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for All Formats</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html"><i class="fa fa-check"></i><b>3</b> Use Bootstrap Tables in gitbooks & epub</a><ul>
<li class="chapter" data-level="3.1" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html#gitbook"><i class="fa fa-check"></i><b>3.1</b> Gitbook</a></li>
@@ -174,155 +174,226 @@
ui:
chapter_name: "Chapter "</code></pre>
</div>
-<div id="prepare-your-tables-for-both-formats" class="section level2">
-<h2><span class="header-section-number">2.2</span> Prepare Your Tables for Both Formats</h2>
+<div id="prepare-your-tables-for-all-formats" class="section level2">
+<h2><span class="header-section-number">2.2</span> Prepare Your Tables for All Formats</h2>
<p>In most cases, functions in <code>kable</code> and <code>kableExtra</code> use the same API to accomplish the same styling task in HTML and LaTeX. However, you also need some format specific settings so your tables will look good in both formats. Some common items here include the <code>booktabs</code> and <code>longtable</code> settings in <code>kable</code> and the <code>bootstrap_options</code> and <code>latex_options</code> in <code>kable_styling</code>.</p>
-<p>Here is an example for a table that will work in both HTML and LaTeX.</p>
+<p>Here is an example for a table that will work in HTML, LaTeX & EPUB.</p>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(kableExtra)
-<span class="kw">options</span>(<span class="dt">kableExtra.html.bsTable =</span> T)
-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">5</span>] <span class="op">%>%</span>
-<span class="st"> </span><span class="kw">kable</span>(<span class="dt">booktabs =</span> T) <span class="op">%>%</span><span class="st"> </span>
-<span class="st"> </span><span class="kw">kable_styling</span>(
- <span class="dt">latex_options =</span> <span class="kw">c</span>(<span class="st">"striped"</span>),
- <span class="dt">full_width =</span> F
- ) <span class="op">%>%</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">%>%</span>
-<span class="st"> </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">" "</span>, <span class="st">"Group A"</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">"Group B"</span> =<span class="st"> </span><span class="dv">3</span>))</code></pre>
-<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<span class="kw">library</span>(dplyr)</code></pre>
+<pre><code>## Warning: package 'dplyr' was built under R version 3.5.1</code></pre>
+<pre><code>##
+## Attaching package: 'dplyr'</code></pre>
+<pre><code>## The following objects are masked from 'package:stats':
+##
+## filter, lag</code></pre>
+<pre><code>## The following objects are masked from 'package:base':
+##
+## intersect, setdiff, setequal, union</code></pre>
+<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">options</span>(<span class="dt">kableExtra.html.bsTable =</span> T)
+iris[<span class="dv">1</span><span class="op">:</span><span class="dv">10</span>, ] <span class="op">%>%</span>
+<span class="st"> </span><span class="kw">mutate_if</span>(is.numeric, <span class="cf">function</span>(x) {
+ <span class="kw">cell_spec</span>(x, <span class="dt">bold =</span> T,
+ <span class="dt">color =</span> <span class="kw">spec_color</span>(x, <span class="dt">end =</span> <span class="fl">0.9</span>),
+ <span class="dt">font_size =</span> <span class="kw">spec_font_size</span>(x))
+ }) <span class="op">%>%</span>
+<span class="st"> </span><span class="kw">mutate</span>(<span class="dt">Species =</span> <span class="kw">cell_spec</span>(
+ Species, <span class="dt">color =</span> <span class="st">"white"</span>, <span class="dt">bold =</span> T,
+ <span class="dt">background =</span> <span class="kw">spec_color</span>(<span class="dv">1</span><span class="op">:</span><span class="dv">10</span>, <span class="dt">end =</span> <span class="fl">0.9</span>,
+ <span class="dt">option =</span> <span class="st">"A"</span>, <span class="dt">direction =</span> <span class="dv">-1</span>)
+ )) <span class="op">%>%</span>
+<span class="st"> </span><span class="kw">kable</span>(<span class="dt">escape =</span> F, <span class="dt">align =</span> <span class="st">"c"</span>, <span class="dt">booktabs =</span> T) <span class="op">%>%</span>
+<span class="st"> </span><span class="kw">kable_styling</span>(<span class="kw">c</span>(<span class="st">"striped"</span>, <span class="st">"condensed"</span>),
+ <span class="dt">latex_options =</span> <span class="st">"striped"</span>,
+ <span class="dt">full_width =</span> F)</code></pre>
+<table class="table table-striped table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
-<th style="border-bottom:hidden" colspan="1">
+<th style="text-align:center;">
+Sepal.Length
</th>
-<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="2">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
-Group A
-</div>
+<th style="text-align:center;">
+Sepal.Width
</th>
-<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="3">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
-Group B
-</div>
+<th style="text-align:center;">
+Petal.Length
</th>
-</tr>
-<tr>
-<th style="text-align:left;">
+<th style="text-align:center;">
+Petal.Width
</th>
-<th style="text-align:right;">
-mpg
-</th>
-<th style="text-align:right;">
-cyl
-</th>
-<th style="text-align:right;">
-disp
-</th>
-<th style="text-align:right;">
-hp
-</th>
-<th style="text-align:right;">
-drat
+<th style="text-align:center;">
+Species
</th>
</tr>
</thead>
<tbody>
<tr>
-<td style="text-align:left;font-weight: bold;">
-Mazda RX4
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(40, 174, 128, 1);font-size: 14px;">5.1</span>
</td>
-<td style="text-align:right;">
-21.0
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">3.5</span>
</td>
-<td style="text-align:right;">
-6
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
-<td style="text-align:right;">
-160
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
-<td style="text-align:right;">
-110
-</td>
-<td style="text-align:right;">
-3.90
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 206, 145, 1);">setosa</span>
</td>
</tr>
<tr>
-<td style="text-align:left;font-weight: bold;">
-Mazda RX4 Wag
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
</td>
-<td style="text-align:right;">
-21.0
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(72, 34, 116, 1);font-size: 9px;">3</span>
</td>
-<td style="text-align:right;">
-6
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
-<td style="text-align:right;">
-160
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
-<td style="text-align:right;">
-110
-</td>
-<td style="text-align:right;">
-3.90
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 160, 109, 1);">setosa</span>
</td>
</tr>
<tr>
-<td style="text-align:left;font-weight: bold;">
-Datsun 710
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(57, 87, 140, 1);font-size: 10px;">4.7</span>
</td>
-<td style="text-align:right;">
-22.8
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(56, 88, 140, 1);font-size: 10px;">3.2</span>
</td>
-<td style="text-align:right;">
-4
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span>
</td>
-<td style="text-align:right;">
-108
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
-<td style="text-align:right;">
-93
-</td>
-<td style="text-align:right;">
-3.85
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(246, 110, 92, 1);">setosa</span>
</td>
</tr>
<tr>
-<td style="text-align:left;font-weight: bold;">
-Hornet 4 Drive
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
</td>
-<td style="text-align:right;">
-21.4
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
</td>
-<td style="text-align:right;">
-6
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
</td>
-<td style="text-align:right;">
-258
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
-<td style="text-align:right;">
-110
-</td>
-<td style="text-align:right;">
-3.08
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(222, 73, 104, 1);">setosa</span>
</td>
</tr>
<tr>
-<td style="text-align:left;font-weight: bold;">
-Hornet Sportabout
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
</td>
-<td style="text-align:right;">
-18.7
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(41, 175, 127, 1);font-size: 14px;">3.6</span>
</td>
-<td style="text-align:right;">
-8
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
-<td style="text-align:right;">
-360
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
-<td style="text-align:right;">
-175
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(183, 55, 121, 1);">setosa</span>
</td>
-<td style="text-align:right;">
-3.15
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">5.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">3.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">1.7</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">0.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(140, 41, 129, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(34, 168, 132, 1);font-size: 13px;">0.3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(100, 26, 128, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(60, 15, 112, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(20, 14, 54, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(0, 0, 4, 1);">setosa</span>
</td>
</tr>
</tbody>
diff --git a/docs/bookdown/index.html b/docs/bookdown/index.html
index 24ea124..3e346a2 100644
--- a/docs/bookdown/index.html
+++ b/docs/bookdown/index.html
@@ -25,7 +25,7 @@
<meta name="author" content="Hao Zhu">
-<meta name="date" content="2018-10-16">
+<meta name="date" content="2018-10-23">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -132,7 +132,7 @@
<li class="chapter" data-level="1" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i><b>1</b> Introduction</a></li>
<li class="chapter" data-level="2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html"><i class="fa fa-check"></i><b>2</b> Cross-format Tables in Bookdown</a><ul>
<li class="chapter" data-level="2.1" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#use-the-k-m-approach-instead-of-m-k"><i class="fa fa-check"></i><b>2.1</b> Use the “K-M” approach instead of “M-K”</a></li>
-<li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-both-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for Both Formats</a></li>
+<li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-all-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for All Formats</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html"><i class="fa fa-check"></i><b>3</b> Use Bootstrap Tables in gitbooks & epub</a><ul>
<li class="chapter" data-level="3.1" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html#gitbook"><i class="fa fa-check"></i><b>3.1</b> Gitbook</a></li>
@@ -158,7 +158,7 @@
<div id="header">
<h1 class="title">Using kableExtra in Bookdown</h1>
<p class="author"><em>Hao Zhu</em></p>
-<p class="date"><em>2018-10-16</em></p>
+<p class="date"><em>2018-10-23</em></p>
</div>
<div id="introduction" class="section level1">
<h1><span class="header-section-number">Chapter 1</span> Introduction</h1>
diff --git a/docs/bookdown/index.md b/docs/bookdown/index.md
index 1c298a8..0c2844b 100644
--- a/docs/bookdown/index.md
+++ b/docs/bookdown/index.md
@@ -1,7 +1,7 @@
---
title: "Using kableExtra in Bookdown"
author: "Hao Zhu"
-date: "2018-10-16"
+date: "2018-10-23"
site: bookdown::bookdown_site
documentclass: book
bibliography: [book.bib, packages.bib]
diff --git a/docs/bookdown/libs/kePrint-0.0.1/kePrint.js b/docs/bookdown/libs/kePrint-0.0.1/kePrint.js
index 4f9728d..e6fbbfc 100644
--- a/docs/bookdown/libs/kePrint-0.0.1/kePrint.js
+++ b/docs/bookdown/libs/kePrint-0.0.1/kePrint.js
@@ -1,4 +1,8 @@
$(document).ready(function(){
- $('[data-toggle="tooltip"]').tooltip();
- $('[data-toggle="popover"]').popover();
+ if (typeof $('[data-toggle="tooltip"]').tooltip === 'function') {
+ $('[data-toggle="tooltip"]').tooltip();
+ }
+ if ($('[data-toggle="popover"]').popover === 'function') {
+ $('[data-toggle="popover"]').popover();
+ }
});
diff --git a/docs/bookdown/search_index.json b/docs/bookdown/search_index.json
index 004b750..ec739cf 100644
--- a/docs/bookdown/search_index.json
+++ b/docs/bookdown/search_index.json
@@ -1,5 +1,5 @@
[
-["index.html", "Using kableExtra in Bookdown Chapter 1 Introduction", " Using kableExtra in Bookdown Hao Zhu 2018-10-16 Chapter 1 Introduction If you have tried to use kableExtra in a bookdown project with mutltiple formats, you may have experienced some problems. For example, you might not be able to render HTML and PDF tables at the same time using the same piece of code. At the same time, you might start to wonder if it’s possible to create bootstrap style tables in gitbook. I will try to address these issues using this example. This book is hosted at https://haozhu233.github.io/kableExtra/bookdown/index.html You can download PDF & EPUB to see the results of kableExtra in those formats using the same code. You can find the source code for this project at https://github.com/haozhu233/kableExtra/tree/master/docs. "],
-["cross-format-tables-in-bookdown.html", "Chapter 2 Cross-format Tables in Bookdown 2.1 Use the “K-M” approach instead of “M-K” 2.2 Prepare Your Tables for Both Formats", " Chapter 2 Cross-format Tables in Bookdown Note that if kableExtra 0.9.0 doesn’t support the EPUB format. If you need to output tables in .epub, please upgrade to the dev version or version 1.0 on CRAN once it’s released. 2.1 Use the “K-M” approach instead of “M-K” Please read this chapter about the “K-M”/“M-K” approaches in bookdown: https://bookdown.org/yihui/bookdown/new-session.html To generate cross-format tables with kableExtra in a multi-format bookdown project, you will have to use the “M-K” approach by setting new_session: true in _bookdown.yml. Somehow the “M-K” approach, which merges chapters to a big Rmd and then renders, shares the global environment across formats. For now, I’m not sure if this is a bug or intended behavior. It might be fixable in the future but please don’t count on that. By setting new_session: true, we force R to use a new session for every chapter for different formats. In this way, tables are generated differently in different formats. Note that the “M-K” approach is slower than the “K-M” approach. At the same time, packages and data are not shared accross chapter. # Example _bookdown.yml book_filename: "bookdown_example" delete_merged_file: true new_session: true language: ui: chapter_name: "Chapter " 2.2 Prepare Your Tables for Both Formats In most cases, functions in kable and kableExtra use the same API to accomplish the same styling task in HTML and LaTeX. However, you also need some format specific settings so your tables will look good in both formats. Some common items here include the booktabs and longtable settings in kable and the bootstrap_options and latex_options in kable_styling. Here is an example for a table that will work in both HTML and LaTeX. library(kableExtra) options(kableExtra.html.bsTable = T) mtcars[1:5, 1:5] %>% kable(booktabs = T) %>% kable_styling( latex_options = c("striped"), full_width = F ) %>% column_spec(1, bold = T) %>% add_header_above(c(" ", "Group A" = 2, "Group B" = 3)) Group A Group B mpg cyl disp hp drat Mazda RX4 21.0 6 160 110 3.90 Mazda RX4 Wag 21.0 6 160 110 3.90 Datsun 710 22.8 4 108 93 3.85 Hornet 4 Drive 21.4 6 258 110 3.08 Hornet Sportabout 18.7 8 360 175 3.15 "],
-["use-bootstrap-tables-in-gitbooks-epub.html", "Chapter 3 Use Bootstrap Tables in gitbooks & epub 3.1 Gitbook 3.2 Epub", " Chapter 3 Use Bootstrap Tables in gitbooks & epub 3.1 Gitbook Most of kableExtra tricks will work in bookdown except those requiring bootstrap. By default, rmarkdown won’t load bootstrap for you on gitbook as it’s not necesary. In kableExtra, I used the bootstrap 3.3.7 customization tool and made a customized css copy. You can load it by setting options(kableExtra.html.bsTable = T). library(kableExtra) options(kableExtra.html.bsTable = T) mtcars[1:5, 1:5] %>% kable(booktabs = T) %>% kable_styling( bootstrap_options = c("striped","hover", "bordered", "condensed"), latex_options = c("striped") ) %>% column_spec(1, color = "red") %>% add_header_above(c(" ", "Group A" = 2, "Group B" = 3)) Group A Group B mpg cyl disp hp drat Mazda RX4 21.0 6 160 110 3.90 Mazda RX4 Wag 21.0 6 160 110 3.90 Datsun 710 22.8 4 108 93 3.85 Hornet 4 Drive 21.4 6 258 110 3.08 Hornet Sportabout 18.7 8 360 175 3.15 One very important note here is that by default bookdown loads the gitbook table css on start up. It has some conflicts with bootstrap tables. As a result, some features like hover won’t be able to work by default. To solve this problem, you need to use the latest version of bookdown (version >= 0.7.21) and turn off the table_css option under bookdown::gitbook in _output.yml bookdown::gitbook: table_css: false 3.2 Epub Right now, it’s impossible to load addition CSS through HTML dependency (due to a setting in rmarkdown). I will file an issue in rmarkdown and see if this is something that can be changed. In the mean time, to use bootstrap tables in Epub, you will have to manually load this stylesheet by putting it to a CSS file (such as “style.css”) and load it in _output.yml. For example, bookdown::epub_book: stylesheet: style.css "]
+["index.html", "Using kableExtra in Bookdown Chapter 1 Introduction", " Using kableExtra in Bookdown Hao Zhu 2018-10-23 Chapter 1 Introduction If you have tried to use kableExtra in a bookdown project with mutltiple formats, you may have experienced some problems. For example, you might not be able to render HTML and PDF tables at the same time using the same piece of code. At the same time, you might start to wonder if it’s possible to create bootstrap style tables in gitbook. I will try to address these issues using this example. This book is hosted at https://haozhu233.github.io/kableExtra/bookdown/index.html You can download PDF & EPUB to see the results of kableExtra in those formats using the same code. You can find the source code for this project at https://github.com/haozhu233/kableExtra/tree/master/docs. "],
+["cross-format-tables-in-bookdown.html", "Chapter 2 Cross-format Tables in Bookdown 2.1 Use the “K-M” approach instead of “M-K” 2.2 Prepare Your Tables for All Formats", " Chapter 2 Cross-format Tables in Bookdown Note that if kableExtra 0.9.0 doesn’t support the EPUB format. If you need to output tables in .epub, please upgrade to the dev version or version 1.0 on CRAN once it’s released. 2.1 Use the “K-M” approach instead of “M-K” Please read this chapter about the “K-M”/“M-K” approaches in bookdown: https://bookdown.org/yihui/bookdown/new-session.html To generate cross-format tables with kableExtra in a multi-format bookdown project, you will have to use the “M-K” approach by setting new_session: true in _bookdown.yml. Somehow the “M-K” approach, which merges chapters to a big Rmd and then renders, shares the global environment across formats. For now, I’m not sure if this is a bug or intended behavior. It might be fixable in the future but please don’t count on that. By setting new_session: true, we force R to use a new session for every chapter for different formats. In this way, tables are generated differently in different formats. Note that the “M-K” approach is slower than the “K-M” approach. At the same time, packages and data are not shared accross chapter. # Example _bookdown.yml book_filename: "bookdown_example" delete_merged_file: true new_session: true language: ui: chapter_name: "Chapter " 2.2 Prepare Your Tables for All Formats In most cases, functions in kable and kableExtra use the same API to accomplish the same styling task in HTML and LaTeX. However, you also need some format specific settings so your tables will look good in both formats. Some common items here include the booktabs and longtable settings in kable and the bootstrap_options and latex_options in kable_styling. Here is an example for a table that will work in HTML, LaTeX & EPUB. library(kableExtra) library(dplyr) ## Warning: package 'dplyr' was built under R version 3.5.1 ## ## Attaching package: 'dplyr' ## The following objects are masked from 'package:stats': ## ## filter, lag ## The following objects are masked from 'package:base': ## ## intersect, setdiff, setequal, union options(kableExtra.html.bsTable = T) iris[1:10, ] %>% mutate_if(is.numeric, function(x) { cell_spec(x, bold = T, color = spec_color(x, end = 0.9), font_size = spec_font_size(x)) }) %>% mutate(Species = cell_spec( Species, color = "white", bold = T, background = spec_color(1:10, end = 0.9, option = "A", direction = -1) )) %>% kable(escape = F, align = "c", booktabs = T) %>% kable_styling(c("striped", "condensed"), latex_options = "striped", full_width = F) Sepal.Length Sepal.Width Petal.Length Petal.Width Species 5.1 3.5 1.4 0.2 setosa 4.9 3 1.4 0.2 setosa 4.7 3.2 1.3 0.2 setosa 4.6 3.1 1.5 0.2 setosa 5 3.6 1.4 0.2 setosa 5.4 3.9 1.7 0.4 setosa 4.6 3.4 1.4 0.3 setosa 5 3.4 1.5 0.2 setosa 4.4 2.9 1.4 0.2 setosa 4.9 3.1 1.5 0.1 setosa "],
+["use-bootstrap-tables-in-gitbooks-epub.html", "Chapter 3 Use Bootstrap Tables in gitbooks & epub 3.1 Gitbook 3.2 Epub", " Chapter 3 Use Bootstrap Tables in gitbooks & epub 3.1 Gitbook Most of kableExtra tricks will work in bookdown except those requiring bootstrap. By default, rmarkdown won’t load bootstrap for you on gitbook as it’s not necesary. In kableExtra, I used the bootstrap 3.3.7 customization tool and made a customized css copy. You can load it by setting options(kableExtra.html.bsTable = T). library(kableExtra) options(kableExtra.html.bsTable = T) mtcars[1:5, 1:5] %>% kable(booktabs = T) %>% kable_styling( bootstrap_options = c("striped","hover", "bordered", "condensed"), latex_options = c("striped") ) %>% column_spec(1, color = "red") %>% add_header_above(c(" ", "Group A" = 2, "Group B" = 3)) Group A Group B mpg cyl disp hp drat Mazda RX4 21.0 6 160 110 3.90 Mazda RX4 Wag 21.0 6 160 110 3.90 Datsun 710 22.8 4 108 93 3.85 Hornet 4 Drive 21.4 6 258 110 3.08 Hornet Sportabout 18.7 8 360 175 3.15 One very important note here is that by default bookdown loads the gitbook table css on start up. It has some conflicts with bootstrap tables. As a result, some features like hover won’t be able to work by default. To solve this problem, you need to use the latest version of bookdown (version >= 0.7.21) and turn off the table_css option under bookdown::gitbook in _output.yml bookdown::gitbook: table_css: false 3.2 Epub Right now, it’s impossible to load addition CSS through HTML dependency and this mechanism exists for a reason ( See this issue I filed ). You will have to manually load this stylesheet by putting it to a CSS file (such as “style.css”) and load it in _output.yml. For example, bookdown::epub_book: stylesheet: style.css "]
]
diff --git a/docs/bookdown/use-bootstrap-tables-in-gitbooks-epub.html b/docs/bookdown/use-bootstrap-tables-in-gitbooks-epub.html
index fcc5db5..a4e9ac7 100644
--- a/docs/bookdown/use-bootstrap-tables-in-gitbooks-epub.html
+++ b/docs/bookdown/use-bootstrap-tables-in-gitbooks-epub.html
@@ -25,7 +25,7 @@
<meta name="author" content="Hao Zhu">
-<meta name="date" content="2018-10-16">
+<meta name="date" content="2018-10-23">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -132,7 +132,7 @@
<li class="chapter" data-level="1" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i><b>1</b> Introduction</a></li>
<li class="chapter" data-level="2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html"><i class="fa fa-check"></i><b>2</b> Cross-format Tables in Bookdown</a><ul>
<li class="chapter" data-level="2.1" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#use-the-k-m-approach-instead-of-m-k"><i class="fa fa-check"></i><b>2.1</b> Use the “K-M” approach instead of “M-K”</a></li>
-<li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-both-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for Both Formats</a></li>
+<li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-all-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for All Formats</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html"><i class="fa fa-check"></i><b>3</b> Use Bootstrap Tables in gitbooks & epub</a><ul>
<li class="chapter" data-level="3.1" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html#gitbook"><i class="fa fa-check"></i><b>3.1</b> Gitbook</a></li>
@@ -316,7 +316,7 @@
</div>
<div id="epub" class="section level2">
<h2><span class="header-section-number">3.2</span> Epub</h2>
-<p>Right now, it’s impossible to load addition CSS through HTML dependency (due to a setting in rmarkdown). I will file an issue in <code>rmarkdown</code> and see if this is something that can be changed. In the mean time, to use bootstrap tables in Epub, you will have to manually load <a href="https://github.com/haozhu233/kableExtra/blob/master/inst/bootstrapTable-3.3.7/bootstrapTable.min.css">this stylesheet</a> by putting it to a CSS file (such as “style.css”) and load it in <code>_output.yml</code>. For example,</p>
+<p>Right now, it’s impossible to load addition CSS through HTML dependency and this mechanism exists for a reason ( <a href="https://github.com/rstudio/rmarkdown/issues/1457">See this issue I filed</a> ). You will have to manually load <a href="https://github.com/haozhu233/kableExtra/blob/master/inst/bootstrapTable-3.3.7/bootstrapTable.min.css">this stylesheet</a> by putting it to a CSS file (such as “style.css”) and load it in <code>_output.yml</code>. For example,</p>
<pre><code>bookdown::epub_book:
stylesheet: style.css</code></pre>