| <!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> | 
 |  | 
 | <link rel="stylesheet" href="style.css" type="text/css" /> | 
 | </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.html"><a href="use-bootstrap-tables-in-gitbooks.html"><i class="fa fa-check"></i><b>3</b> Use Bootstrap Tables in gitbooks</a></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" class="section level1"> | 
 | <h1><span class="header-section-number">Chapter 3</span> Use Bootstrap Tables in gitbooks</h1> | 
 | <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 there are potential conflict.</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">"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-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> | 
 |  | 
 | </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> |