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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'tables'
- var parent = 'elements'
- var title = 'Tables - Elements - Spectre.css CSS Framework'
- var description = 'Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('tables', 'Tables')
include ../_layout/_ad-g.pug
p Tables include default styles for tables and data sets.
.docs-demo.columns
.column.col-12
table.table
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.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<table class="table">
<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-subheading('tables-striped', 'Striped tables')
.docs-demo.columns
.column.col-12
table.table.table-striped.table-hover
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
| 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-subheading('tables-scroll', 'Scrollable tables')
.docs-demo.columns
.column.col-12
table.table.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-scroll">
...
</table>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
