1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
p Tables include default styles for tables and data sets.
.docs-demo.columns
.column.col-12
table.table.table-striped
thead
tr
th Name
th Genre
th Release date
tbody
tr
td The Shawshank Redemption
td Crime, Drama
td 14 October 1994
tr
td The Godfather
td Crime, Drama
td 24 March 1972
tr
td Schindler's List
td Biography, Drama, History
td 4 February 1994
tr
td Se7en
td Crime, Drama, Mystery
td 22 September 1995
p
| Add the #[code table] class to any #{'<table>'} element.
| The class will add padding, border and emphasized table header.
| Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
| For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
p
| Use the #[code active] class to make #{'<tr>'} element highlighted.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<table class="table table-striped table-hover">
<thead>
<tr>
<th>name</th>
<th>genre</th>
<th>release date</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>The Shawshank Redemption</td>
<td>Crime, Drama</td>
<td>14 October 1994</td>
</tr>
</tbody>
</table>
.docs-demo.columns
.column.col-12
table.table.table-striped.table-scroll
thead
tr
th Name
th Rating
th Duration
th Genre
th Release date
th Director
tbody
tr
td The Shawshank Redemption
td R
td 2h 22min
td Crime, Drama
td 14 October 1994
td Frank Darabont
tr
td The Godfather
td R
td 2h 55min
td Crime, Drama
td 24 March 1972
td Francis Ford Coppola
tr
td Schindler's List
td R
td 3h 15min
td Biography, Drama, History
td 4 February 1994
td Steven Spielberg
tr
td Se7en
td R
td 2h 7min
td Crime, Drama, Mystery
td 22 September 1995
td David Fincher
p
| Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<table class="table table-striped table-scroll">
...
</table>
|
