Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / kableExtra / c145088eb8678a57130ee709f82f58cbc1ce9cd5 / . / docs / bookdown_example / _book / use-bootstrap-tables-in-gitbooks.html
blob: b573e6037fc17a6773271d07532775d5bb74cbb3 [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<link rel="stylesheet" href="style.css" type="text/css" />
121</head>
122
123<body>
124
125
126
127 <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">
128
129 <div class="book-summary">
130 <nav role="navigation">
131
132<ul class="summary">
133<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>
134<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>
135<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>
136<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>
137</ul></li>
138<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>
139</ul>
140
141 </nav>
142 </div>
143
144 <div class="book-body">
145 <div class="body-inner">
146 <div class="book-header" role="navigation">
147 <h1>
148 <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Using kableExtra in Bookdown Projects</a>
149 </h1>
150 </div>
151
152 <div class="page-wrapper" tabindex="-1" role="main">
153 <div class="page-inner">
154
155 <section class="normal" id="section-">
156<div id="use-bootstrap-tables-in-gitbooks" class="section level1">
157<h1><span class="header-section-number">Chapter 3</span> Use Bootstrap Tables in gitbooks</h1>
158<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>
159<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(kableExtra)
160<span class="kw">options</span>(<span class="dt">kableExtra.html.bsTable =</span> T)
161
162mtcars[<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>
163<span class="st"> </span><span class="kw">kable</span>(<span class="dt">booktabs =</span> T) <span class="op">%&gt;%</span><span class="st"> </span>
164<span class="st"> </span><span class="kw">kable_styling</span>(
165 <span class="dt">bootstrap_options =</span> <span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>, <span class="st">&quot;bordered&quot;</span>),
166 <span class="dt">latex_options =</span> <span class="kw">c</span>(<span class="st">&quot;striped&quot;</span>),
167 <span class="dt">full_width =</span> F
168 ) <span class="op">%&gt;%</span>
169<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>
170<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>
171<table class="table table-striped table-bordered" style="width: auto !important; margin-left: auto; margin-right: auto;">
172<thead>
173<tr>
174<th style="border-bottom:hidden" colspan="1">
175</th>
176<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="2">
177<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
178Group A
179</div>
180</th>
181<th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="3">
182<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
183Group B
184</div>
185</th>
186</tr>
187<tr>
188<th style="text-align:left;">
189</th>
190<th style="text-align:right;">
191mpg
192</th>
193<th style="text-align:right;">
194cyl
195</th>
196<th style="text-align:right;">
197disp
198</th>
199<th style="text-align:right;">
200hp
201</th>
202<th style="text-align:right;">
203drat
204</th>
205</tr>
206</thead>
207<tbody>
208<tr>
209<td style="text-align:left;color: red;">
210Mazda RX4
211</td>
212<td style="text-align:right;">
21321.0
214</td>
215<td style="text-align:right;">
2166
217</td>
218<td style="text-align:right;">
219160
220</td>
221<td style="text-align:right;">
222110
223</td>
224<td style="text-align:right;">
2253.90
226</td>
227</tr>
228<tr>
229<td style="text-align:left;color: red;">
230Mazda RX4 Wag
231</td>
232<td style="text-align:right;">
23321.0
234</td>
235<td style="text-align:right;">
2366
237</td>
238<td style="text-align:right;">
239160
240</td>
241<td style="text-align:right;">
242110
243</td>
244<td style="text-align:right;">
2453.90
246</td>
247</tr>
248<tr>
249<td style="text-align:left;color: red;">
250Datsun 710
251</td>
252<td style="text-align:right;">
25322.8
254</td>
255<td style="text-align:right;">
2564
257</td>
258<td style="text-align:right;">
259108
260</td>
261<td style="text-align:right;">
26293
263</td>
264<td style="text-align:right;">
2653.85
266</td>
267</tr>
268<tr>
269<td style="text-align:left;color: red;">
270Hornet 4 Drive
271</td>
272<td style="text-align:right;">
27321.4
274</td>
275<td style="text-align:right;">
2766
277</td>
278<td style="text-align:right;">
279258
280</td>
281<td style="text-align:right;">
282110
283</td>
284<td style="text-align:right;">
2853.08
286</td>
287</tr>
288<tr>
289<td style="text-align:left;color: red;">
290Hornet Sportabout
291</td>
292<td style="text-align:right;">
29318.7
294</td>
295<td style="text-align:right;">
2968
297</td>
298<td style="text-align:right;">
299360
300</td>
301<td style="text-align:right;">
302175
303</td>
304<td style="text-align:right;">
3053.15
306</td>
307</tr>
308</tbody>
309</table>
310
311</div>
312 </section>
313
314 </div>
315 </div>
316 </div>
317<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>
318
319 </div>
320 </div>
321<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
322<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
323<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
324<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
325<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
326<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
327<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
328<script>
329gitbook.require(["gitbook"], function(gitbook) {
330gitbook.start({
331"sharing": {
332"github": false,
333"facebook": true,
334"twitter": true,
335"google": false,
336"linkedin": false,
337"weibo": false,
338"instapper": false,
339"vk": false,
340"all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"]
341},
342"fontsettings": {
343"theme": "white",
344"family": "sans",
345"size": 2
346},
347"edit": {
348"link": null,
349"text": null
350},
351"download": ["bookdown_example.pdf", "bookdown_example.epub"],
352"toc": {
353"collapse": "subsection"
354}
355});
356});
357</script>
358
359</body>
360
361</html>