| <!DOCTYPE html> |
| <html > |
| |
| <head> |
| |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <title>Using kableExtra in Bookdown Projects</title> |
| <meta name="description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects."> |
| <meta name="generator" content="bookdown and GitBook 2.6.7"> |
| |
| <meta property="og:title" content="Using kableExtra in Bookdown Projects" /> |
| <meta property="og:type" content="book" /> |
| |
| |
| <meta property="og:description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects." /> |
| |
| |
| <meta name="twitter:card" content="summary" /> |
| <meta name="twitter:title" content="Using kableExtra in Bookdown Projects" /> |
| |
| <meta name="twitter:description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects." /> |
| |
| |
| <meta name="author" content="Hao Zhu"> |
| |
| |
| <meta name="date" content="2018-10-03"> |
| |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| |
| |
| <link rel="prev" href="cross-format-tables-in-bookdown.html"> |
| |
| <script src="libs/jquery-2.2.3/jquery.min.js"></script> |
| <link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" /> |
| <link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" /> |
| <link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" /> |
| <link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" /> |
| <link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" /> |
| |
| |
| |
| |
| |
| |
| |
| <script src="libs/kePrint-0.0.1/kePrint.js"></script> |
| <link href="libs/bsTable-3.3.7/bootstrapTable.min.css" rel="stylesheet" /> |
| |
| |
| <style type="text/css"> |
| a.sourceLine { display: inline-block; line-height: 1.25; } |
| a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; } |
| a.sourceLine:empty { height: 1.2em; position: absolute; } |
| .sourceCode { overflow: visible; } |
| code.sourceCode { white-space: pre; position: relative; } |
| div.sourceCode { margin: 1em 0; } |
| pre.sourceCode { margin: 0; } |
| @media screen { |
| div.sourceCode { overflow: auto; } |
| } |
| @media print { |
| code.sourceCode { white-space: pre-wrap; } |
| a.sourceLine { text-indent: -1em; padding-left: 1em; } |
| } |
| pre.numberSource a.sourceLine |
| { position: relative; } |
| pre.numberSource a.sourceLine:empty |
| { position: absolute; } |
| pre.numberSource a.sourceLine::before |
| { content: attr(data-line-number); |
| position: absolute; left: -5em; text-align: right; vertical-align: baseline; |
| border: none; pointer-events: all; |
| -webkit-touch-callout: none; -webkit-user-select: none; |
| -khtml-user-select: none; -moz-user-select: none; |
| -ms-user-select: none; user-select: none; |
| padding: 0 4px; width: 4em; |
| color: #aaaaaa; |
| } |
| pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } |
| div.sourceCode |
| { } |
| @media screen { |
| a.sourceLine::before { text-decoration: underline; } |
| } |
| code span.al { color: #ff0000; font-weight: bold; } /* Alert */ |
| code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ |
| code span.at { color: #7d9029; } /* Attribute */ |
| code span.bn { color: #40a070; } /* BaseN */ |
| code span.bu { } /* BuiltIn */ |
| code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ |
| code span.ch { color: #4070a0; } /* Char */ |
| code span.cn { color: #880000; } /* Constant */ |
| code span.co { color: #60a0b0; font-style: italic; } /* Comment */ |
| code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ |
| code span.do { color: #ba2121; font-style: italic; } /* Documentation */ |
| code span.dt { color: #902000; } /* DataType */ |
| code span.dv { color: #40a070; } /* DecVal */ |
| code span.er { color: #ff0000; font-weight: bold; } /* Error */ |
| code span.ex { } /* Extension */ |
| code span.fl { color: #40a070; } /* Float */ |
| code span.fu { color: #06287e; } /* Function */ |
| code span.im { } /* Import */ |
| code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ |
| code span.kw { color: #007020; font-weight: bold; } /* Keyword */ |
| code span.op { color: #666666; } /* Operator */ |
| code span.ot { color: #007020; } /* Other */ |
| code span.pp { color: #bc7a00; } /* Preprocessor */ |
| code span.sc { color: #4070a0; } /* SpecialChar */ |
| code span.ss { color: #bb6688; } /* SpecialString */ |
| code span.st { color: #4070a0; } /* String */ |
| code span.va { color: #19177c; } /* Variable */ |
| code span.vs { color: #4070a0; } /* VerbatimString */ |
| code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| |
| |
| <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath="."> |
| |
| <div class="book-summary"> |
| <nav role="navigation"> |
| |
| <ul class="summary"> |
| <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> |
| </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> |
| <li class="chapter" data-level="3.2" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html#epub"><i class="fa fa-check"></i><b>3.2</b> Epub</a></li> |
| </ul></li> |
| </ul> |
| |
| </nav> |
| </div> |
| |
| <div class="book-body"> |
| <div class="body-inner"> |
| <div class="book-header" role="navigation"> |
| <h1> |
| <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Using kableExtra in Bookdown Projects</a> |
| </h1> |
| </div> |
| |
| <div class="page-wrapper" tabindex="-1" role="main"> |
| <div class="page-inner"> |
| |
| <section class="normal" id="section-"> |
| <div id="use-bootstrap-tables-in-gitbooks-epub" class="section level1"> |
| <h1><span class="header-section-number">Chapter 3</span> Use Bootstrap Tables in gitbooks & epub</h1> |
| <div id="gitbook" class="section level2"> |
| <h2><span class="header-section-number">3.1</span> Gitbook</h2> |
| <p>Most of <code>kableExtra</code> tricks will work in <code>bookdown</code> except those requires <a href="http://getbootstrap.com/"><code>bootstrap</code></a>. By default, <code>rmarkdown</code> won’t load <code>bootstrap</code> for you on gitbook as it’s not necesary. In <code>kableExtra</code>, I used the <a href="https://getbootstrap.com/docs/3.3/customize/">bootstrap 3.3.7 customization tool</a> and made a customized css copy. You can load it by setting <code>options(kableExtra.html.bsTable = T)</code>.</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">bootstrap_options =</span> <span class="kw">c</span>(<span class="st">"striped"</span>,<span class="st">"hover"</span>, <span class="st">"bordered"</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">color =</span> <span class="st">"red"</span>) <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 table-striped table-hover table-bordered" 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> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td style="text-align:left;color: red;"> |
| 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> |
| </tr> |
| <tr> |
| <td style="text-align:left;color: red;"> |
| 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> |
| </tr> |
| <tr> |
| <td style="text-align:left;color: red;"> |
| 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> |
| </tr> |
| <tr> |
| <td style="text-align:left;color: red;"> |
| 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> |
| </tr> |
| <tr> |
| <td style="text-align:left;color: red;"> |
| 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> |
| </tr> |
| </tbody> |
| </table> |
| <p>However, very unfortunately, as we can see, the <code>hover</code> 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 <code>bookdown</code> (for example, we can replace the gitbook table part with bootstrap tables), there is nothing we can do here.</p> |
| </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> |
| <pre><code>bookdown::epub_book: |
| stylesheet: style.css</code></pre> |
| |
| </div> |
| </div> |
| </section> |
| |
| </div> |
| </div> |
| </div> |
| <a href="cross-format-tables-in-bookdown.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page"><i class="fa fa-angle-left"></i></a> |
| |
| </div> |
| </div> |
| <script src="libs/gitbook-2.6.7/js/app.min.js"></script> |
| <script src="libs/gitbook-2.6.7/js/lunr.js"></script> |
| <script src="libs/gitbook-2.6.7/js/plugin-search.js"></script> |
| <script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script> |
| <script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script> |
| <script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script> |
| <script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script> |
| <script> |
| gitbook.require(["gitbook"], function(gitbook) { |
| gitbook.start({ |
| "sharing": { |
| "github": false, |
| "facebook": true, |
| "twitter": true, |
| "google": false, |
| "linkedin": false, |
| "weibo": false, |
| "instapper": false, |
| "vk": false, |
| "all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"] |
| }, |
| "fontsettings": { |
| "theme": "white", |
| "family": "sans", |
| "size": 2 |
| }, |
| "edit": { |
| "link": null, |
| "text": null |
| }, |
| "download": ["bookdown_example.pdf", "bookdown_example.epub"], |
| "toc": { |
| "collapse": "subsection" |
| } |
| }); |
| }); |
| </script> |
| |
| </body> |
| |
| </html> |