Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / kableExtra / b8098059c0f8c80a2ddb6a1c32481d2380886943 / . / docs / bookdown / use-bootstrap-tables-in-gitbooks-epub.html
blob: a8c434d00a1eaa9019e90afbd663782b7f795730 [file] [log] [blame]
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]1<!DOCTYPE html>
2<html >
3
4<head>
5
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
Hao Zhuc859dba2018-10-03 18:05:55 -0400[diff] [blame]8 <title>Using kableExtra in Bookdown</title>
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]9 <meta name="description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects.">
10 <meta name="generator" content="bookdown and GitBook 2.6.7">
11
Hao Zhuc859dba2018-10-03 18:05:55 -0400[diff] [blame]12 <meta property="og:title" content="Using kableExtra in Bookdown" />
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]13 <meta property="og:type" content="book" />
14
15
16 <meta property="og:description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects." />
17
18
19 <meta name="twitter:card" content="summary" />
Hao Zhuc859dba2018-10-03 18:05:55 -0400[diff] [blame]20 <meta name="twitter:title" content="Using kableExtra in Bookdown" />
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]21
22 <meta name="twitter:description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects." />
23
24
25<meta name="author" content="Hao Zhu">
26
27
Hao Zhub8098052018-10-08 16:57:43 -0400[diff] [blame^]28<meta name="date" content="2018-10-08">
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]29
30 <meta name="viewport" content="width=device-width, initial-scale=1">
31 <meta name="apple-mobile-web-app-capable" content="yes">
32 <meta name="apple-mobile-web-app-status-bar-style" content="black">
33
34
35<link rel="prev" href="cross-format-tables-in-bookdown.html">
36
37<script src="libs/jquery-2.2.3/jquery.min.js"></script>
38<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
39<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
40<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
41<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
42<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
43
44
45
46
47
48
49
50<script src="libs/kePrint-0.0.1/kePrint.js"></script>
51<link href="libs/bsTable-3.3.7/bootstrapTable.min.css" rel="stylesheet" />
52
53
54<style type="text/css">
55a.sourceLine { display: inline-block; line-height: 1.25; }
56a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
57a.sourceLine:empty { height: 1.2em; position: absolute; }
58.sourceCode { overflow: visible; }
59code.sourceCode { white-space: pre; position: relative; }
60div.sourceCode { margin: 1em 0; }
61pre.sourceCode { margin: 0; }
62@media screen {
63div.sourceCode { overflow: auto; }
64}
65@media print {
66code.sourceCode { white-space: pre-wrap; }
67a.sourceLine { text-indent: -1em; padding-left: 1em; }
68}
69pre.numberSource a.sourceLine
70 { position: relative; }
71pre.numberSource a.sourceLine:empty
72 { position: absolute; }
73pre.numberSource a.sourceLine::before
74 { content: attr(data-line-number);
75 position: absolute; left: -5em; text-align: right; vertical-align: baseline;
76 border: none; pointer-events: all;
77 -webkit-touch-callout: none; -webkit-user-select: none;
78 -khtml-user-select: none; -moz-user-select: none;
79 -ms-user-select: none; user-select: none;
80 padding: 0 4px; width: 4em;
81 color: #aaaaaa;
82 }
83pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
84div.sourceCode
85 { }
86@media screen {
87a.sourceLine::before { text-decoration: underline; }
88}
89code span.al { color: #ff0000; font-weight: bold; } /* Alert */
90code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
91code span.at { color: #7d9029; } /* Attribute */
92code span.bn { color: #40a070; } /* BaseN */
93code span.bu { } /* BuiltIn */
94code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
95code span.ch { color: #4070a0; } /* Char */
96code span.cn { color: #880000; } /* Constant */
97code span.co { color: #60a0b0; font-style: italic; } /* Comment */
98code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
99code span.do { color: #ba2121; font-style: italic; } /* Documentation */
100code span.dt { color: #902000; } /* DataType */
101code span.dv { color: #40a070; } /* DecVal */
102code span.er { color: #ff0000; font-weight: bold; } /* Error */
103code span.ex { } /* Extension */
104code span.fl { color: #40a070; } /* Float */
105code span.fu { color: #06287e; } /* Function */
106code span.im { } /* Import */
107code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
108code span.kw { color: #007020; font-weight: bold; } /* Keyword */
109code span.op { color: #666666; } /* Operator */
110code span.ot { color: #007020; } /* Other */
111code span.pp { color: #bc7a00; } /* Preprocessor */
112code span.sc { color: #4070a0; } /* SpecialChar */
113code span.ss { color: #bb6688; } /* SpecialString */
114code span.st { color: #4070a0; } /* String */
115code span.va { color: #19177c; } /* Variable */
116code span.vs { color: #4070a0; } /* VerbatimString */
117code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
118</style>
119
120</head>
121
122<body>
123
124
125
126 <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">
127
128 <div class="book-summary">
129 <nav role="navigation">
130
131<ul class="summary">
132<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>
133<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>
134<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>
135<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>
136</ul></li>
137<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 &amp; epub</a><ul>
138<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>
139<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>
140</ul></li>
141</ul>
142
143 </nav>
144 </div>
145
146 <div class="book-body">
147 <div class="body-inner">
148 <div class="book-header" role="navigation">
149 <h1>
Hao Zhuc859dba2018-10-03 18:05:55 -0400[diff] [blame]150 <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Using kableExtra in Bookdown</a>
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]151 </h1>
152 </div>
153
154 <div class="page-wrapper" tabindex="-1" role="main">
155 <div class="page-inner">
156
157 <section class="normal" id="section-">
158<div id="use-bootstrap-tables-in-gitbooks-epub" class="section level1">
159<h1><span class="header-section-number">Chapter 3</span> Use Bootstrap Tables in gitbooks &amp; epub</h1>
160<div id="gitbook" class="section level2">
161<h2><span class="header-section-number">3.1</span> Gitbook</h2>
162<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>
163<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(kableExtra)
164<span class="kw">options</span>(<span class="dt">kableExtra.html.bsTable =</span> T)
165
166mtcars[<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">%&gt;%</span>
167<span class="st"> </span><span class="kw">kable</span>(<span class="dt">booktabs =</span> T) <span class="op">%&gt;%</span><span class="st"> </span>
168<span class="st"> </span><span class="kw">kable_styling</span>(
Hao Zhuc859dba2018-10-03 18:05:55 -0400[diff] [blame]169 <span class="dt">bootstrap_options =</span> <span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>,<span class="st">&quot;hover&quot;</span>, <span class="st">&quot;bordered&quot;</span>, <span class="st">&quot;condensed&quot;</span>),
Hao Zhub8098052018-10-08 16:57:43 -0400[diff] [blame^]170 <span class="dt">latex_options =</span> <span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>)
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]171 ) <span class="op">%&gt;%</span>
172<span class="st"> </span><span class="kw">column_spec</span>(<span class="dv">1</span>, <span class="dt">color =</span> <span class="st">&quot;red&quot;</span>) <span class="op">%&gt;%</span>
173<span class="st"> </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">&quot; &quot;</span>, <span class="st">&quot;Group A&quot;</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">&quot;Group B&quot;</span> =<span class="st"> </span><span class="dv">3</span>))</code></pre>
Hao Zhub8098052018-10-08 16:57:43 -0400[diff] [blame^]174<table class="table table-striped table-hover table-bordered table-condensed" style="margin-left: auto; margin-right: auto;">
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]175<thead>
176<tr>
177<th style="border-bottom:hidden" colspan="1">
178</th>
179<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="2">
180<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
181Group A
182</div>
183</th>
184<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="3">
185<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
186Group B
187</div>
188</th>
189</tr>
190<tr>
191<th style="text-align:left;">
192</th>
193<th style="text-align:right;">
194mpg
195</th>
196<th style="text-align:right;">
197cyl
198</th>
199<th style="text-align:right;">
200disp
201</th>
202<th style="text-align:right;">
203hp
204</th>
205<th style="text-align:right;">
206drat
207</th>
208</tr>
209</thead>
210<tbody>
211<tr>
212<td style="text-align:left;color: red;">
213Mazda RX4
214</td>
215<td style="text-align:right;">
21621.0
217</td>
218<td style="text-align:right;">
2196
220</td>
221<td style="text-align:right;">
222160
223</td>
224<td style="text-align:right;">
225110
226</td>
227<td style="text-align:right;">
2283.90
229</td>
230</tr>
231<tr>
232<td style="text-align:left;color: red;">
233Mazda RX4 Wag
234</td>
235<td style="text-align:right;">
23621.0
237</td>
238<td style="text-align:right;">
2396
240</td>
241<td style="text-align:right;">
242160
243</td>
244<td style="text-align:right;">
245110
246</td>
247<td style="text-align:right;">
2483.90
249</td>
250</tr>
251<tr>
252<td style="text-align:left;color: red;">
253Datsun 710
254</td>
255<td style="text-align:right;">
25622.8
257</td>
258<td style="text-align:right;">
2594
260</td>
261<td style="text-align:right;">
262108
263</td>
264<td style="text-align:right;">
26593
266</td>
267<td style="text-align:right;">
2683.85
269</td>
270</tr>
271<tr>
272<td style="text-align:left;color: red;">
273Hornet 4 Drive
274</td>
275<td style="text-align:right;">
27621.4
277</td>
278<td style="text-align:right;">
2796
280</td>
281<td style="text-align:right;">
282258
283</td>
284<td style="text-align:right;">
285110
286</td>
287<td style="text-align:right;">
2883.08
289</td>
290</tr>
291<tr>
292<td style="text-align:left;color: red;">
293Hornet Sportabout
294</td>
295<td style="text-align:right;">
29618.7
297</td>
298<td style="text-align:right;">
2998
300</td>
301<td style="text-align:right;">
302360
303</td>
304<td style="text-align:right;">
305175
306</td>
307<td style="text-align:right;">
3083.15
309</td>
310</tr>
311</tbody>
312</table>
Hao Zhub8098052018-10-08 16:57:43 -0400[diff] [blame^]313<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 &gt;= 0.7.21) and turn off the <code>table_css</code> option under <code>bookdown::gitbook</code> in <code>_output.yml</code></p>
314<pre><code>bookdown::gitbook:
315 table_css: false</code></pre>
Hao Zhuc1450882018-10-03 17:56:26 -0400[diff] [blame]316</div>
317<div id="epub" class="section level2">
318<h2><span class="header-section-number">3.2</span> Epub</h2>
319<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>
320<pre><code>bookdown::epub_book:
321 stylesheet: style.css</code></pre>
322
323</div>
324</div>
325 </section>
326
327 </div>
328 </div>
329 </div>
330<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>
331
332 </div>
333 </div>
334<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
335<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
336<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
337<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
338<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
339<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
340<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
341<script>
342gitbook.require(["gitbook"], function(gitbook) {
343gitbook.start({
344"sharing": {
345"github": false,
346"facebook": true,
347"twitter": true,
348"google": false,
349"linkedin": false,
350"weibo": false,
351"instapper": false,
352"vk": false,
353"all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"]
354},
355"fontsettings": {
356"theme": "white",
357"family": "sans",
358"size": 2
359},
360"edit": {
361"link": null,
362"text": null
363},
364"download": ["bookdown_example.pdf", "bookdown_example.epub"],
365"toc": {
366"collapse": "subsection"
367}
368});
369});
370</script>
371
372</body>
373
374</html>