Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / kableExtra / 0c4c385d249579c10b349af19e5b608ec34d6993 / . / docs / bookdown / use-bootstrap-tables-in-gitbooks-epub.html
blob: ea4a602204f33cce67c8ec42abe752f8b82b6e26 [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">
8 <title>Using kableExtra in Bookdown Projects</title>
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
12 <meta property="og:title" content="Using kableExtra in Bookdown Projects" />
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" />
20 <meta name="twitter:title" content="Using kableExtra in Bookdown Projects" />
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
28<meta name="date" content="2018-10-03">
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>
150 <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Using kableExtra in Bookdown Projects</a>
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>(
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>),
170 <span class="dt">latex_options =</span> <span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>),
171 <span class="dt">full_width =</span> F
172 ) <span class="op">%&gt;%</span>
173<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>
174<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>
175<table class="table table-striped table-hover table-bordered" style="width: auto !important; margin-left: auto; margin-right: auto;">
176<thead>
177<tr>
178<th style="border-bottom:hidden" colspan="1">
179</th>
180<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="2">
181<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
182Group A
183</div>
184</th>
185<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="3">
186<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
187Group B
188</div>
189</th>
190</tr>
191<tr>
192<th style="text-align:left;">
193</th>
194<th style="text-align:right;">
195mpg
196</th>
197<th style="text-align:right;">
198cyl
199</th>
200<th style="text-align:right;">
201disp
202</th>
203<th style="text-align:right;">
204hp
205</th>
206<th style="text-align:right;">
207drat
208</th>
209</tr>
210</thead>
211<tbody>
212<tr>
213<td style="text-align:left;color: red;">
214Mazda RX4
215</td>
216<td style="text-align:right;">
21721.0
218</td>
219<td style="text-align:right;">
2206
221</td>
222<td style="text-align:right;">
223160
224</td>
225<td style="text-align:right;">
226110
227</td>
228<td style="text-align:right;">
2293.90
230</td>
231</tr>
232<tr>
233<td style="text-align:left;color: red;">
234Mazda RX4 Wag
235</td>
236<td style="text-align:right;">
23721.0
238</td>
239<td style="text-align:right;">
2406
241</td>
242<td style="text-align:right;">
243160
244</td>
245<td style="text-align:right;">
246110
247</td>
248<td style="text-align:right;">
2493.90
250</td>
251</tr>
252<tr>
253<td style="text-align:left;color: red;">
254Datsun 710
255</td>
256<td style="text-align:right;">
25722.8
258</td>
259<td style="text-align:right;">
2604
261</td>
262<td style="text-align:right;">
263108
264</td>
265<td style="text-align:right;">
26693
267</td>
268<td style="text-align:right;">
2693.85
270</td>
271</tr>
272<tr>
273<td style="text-align:left;color: red;">
274Hornet 4 Drive
275</td>
276<td style="text-align:right;">
27721.4
278</td>
279<td style="text-align:right;">
2806
281</td>
282<td style="text-align:right;">
283258
284</td>
285<td style="text-align:right;">
286110
287</td>
288<td style="text-align:right;">
2893.08
290</td>
291</tr>
292<tr>
293<td style="text-align:left;color: red;">
294Hornet Sportabout
295</td>
296<td style="text-align:right;">
29718.7
298</td>
299<td style="text-align:right;">
3008
301</td>
302<td style="text-align:right;">
303360
304</td>
305<td style="text-align:right;">
306175
307</td>
308<td style="text-align:right;">
3093.15
310</td>
311</tr>
312</tbody>
313</table>
314<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>
315</div>
316<div id="epub" class="section level2">
317<h2><span class="header-section-number">3.2</span> Epub</h2>
318<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>
319<pre><code>bookdown::epub_book:
320 stylesheet: style.css</code></pre>
321
322</div>
323</div>
324 </section>
325
326 </div>
327 </div>
328 </div>
329<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>
330
331 </div>
332 </div>
333<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
334<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
335<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
336<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
337<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
338<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
339<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
340<script>
341gitbook.require(["gitbook"], function(gitbook) {
342gitbook.start({
343"sharing": {
344"github": false,
345"facebook": true,
346"twitter": true,
347"google": false,
348"linkedin": false,
349"weibo": false,
350"instapper": false,
351"vk": false,
352"all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"]
353},
354"fontsettings": {
355"theme": "white",
356"family": "sans",
357"size": 2
358},
359"edit": {
360"link": null,
361"text": null
362},
363"download": ["bookdown_example.pdf", "bookdown_example.epub"],
364"toc": {
365"collapse": "subsection"
366}
367});
368});
369</script>
370
371</body>
372
373</html>