| <!DOCTYPE html> |
| <html > |
| |
| <head> |
| |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <title>Using kableExtra in Bookdown</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" /> |
| <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" /> |
| |
| <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-23"> |
| |
| <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-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> |
| <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</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 requiring <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="st">"condensed"</span>), |
| <span class="dt">latex_options =</span> <span class="kw">c</span>(<span class="st">"striped"</span>) |
| ) <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 table-condensed" style="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><strong>One very important note</strong> here is that by default bookdown loads the gitbook table css on start up. It has some conflicts with <code>bootstrap</code> tables. As a result, some features like <code>hover</code> won’t be able to work by default. To solve this problem, you need to use the latest version of <code>bookdown</code> (version >= 0.7.21) and turn off the <code>table_css</code> option under <code>bookdown::gitbook</code> in <code>_output.yml</code></p> |
| <pre><code>bookdown::gitbook: |
| table_css: false</code></pre> |
| </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 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> |
| |
| </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> |