创建 Bulma 表格只需在具有如下结构的 HTML 元素 <table>
上添加一个 CSS 类 table
即可:
-
<table class="table">
做为主 容器
-
thead
为可选的表格顶部
-
tfoot
为可选的表格底部
-
tbody
为表格主内容区
您可以通过在 <tr>
上添加 is-selected
修饰符表示该行被选定
HTML
修饰符
#
table is-striped
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
table is-narrow
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
table is-hoverable
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
table is-fullwidth
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
table is-bordered is-striped is-narrow is-hoverable is-fullwidth
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
表格容器
#
您可以通过在一个 table-container
元素里包裹 table
创建一个可滚动的表格:
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 |
2 |
4 |
6 |
8 |
10 |
12 |
14 |
16 |
18 |
20 |
22 |
24 |
26 |
28 |
30 |
32 |
34 |
36 |
38 |
40 |
42 |
44 |
46 |
48 |
50 |
52 |
54 |
56 |
58 |
60 |
62 |
64 |
66 |
68 |
70 |
72 |
74 |
76 |
78 |
80 |
82 |
84 |
86 |
88 |
90 |
92 |
94 |
96 |
98 |
100 |
102 |
104 |
106 |
108 |
110 |
112 |
114 |
116 |
118 |
120 |
122 |
124 |
126 |
128 |
130 |
132 |
134 |
136 |
138 |
140 |
142 |
144 |
146 |
148 |
150 |
152 |
154 |
156 |
158 |
160 |
162 |
164 |
166 |
168 |
170 |
172 |
174 |
176 |
178 |
180 |
182 |
184 |
186 |
188 |
190 |
192 |
194 |
196 |
198 |
200 |
3 |
6 |
9 |
12 |
15 |
18 |
21 |
24 |
27 |
30 |
33 |
36 |
39 |
42 |
45 |
48 |
51 |
54 |
57 |
60 |
63 |
66 |
69 |
72 |
75 |
78 |
81 |
84 |
87 |
90 |
93 |
96 |
99 |
102 |
105 |
108 |
111 |
114 |
117 |
120 |
123 |
126 |
129 |
132 |
135 |
138 |
141 |
144 |
147 |
150 |
153 |
156 |
159 |
162 |
165 |
168 |
171 |
174 |
177 |
180 |
183 |
186 |
189 |
192 |
195 |
198 |
201 |
204 |
207 |
210 |
213 |
216 |
219 |
222 |
225 |
228 |
231 |
234 |
237 |
240 |
243 |
246 |
249 |
252 |
255 |
258 |
261 |
264 |
267 |
270 |
273 |
276 |
279 |
282 |
285 |
288 |
291 |
294 |
297 |
300 |
4 |
8 |
12 |
16 |
20 |
24 |
28 |
32 |
36 |
40 |
44 |
48 |
52 |
56 |
60 |
64 |
68 |
72 |
76 |
80 |
84 |
88 |
92 |
96 |
100 |
104 |
108 |
112 |
116 |
120 |
124 |
128 |
132 |
136 |
140 |
144 |
148 |
152 |
156 |
160 |
164 |
168 |
172 |
176 |
180 |
184 |
188 |
192 |
196 |
200 |
204 |
208 |
212 |
216 |
220 |
224 |
228 |
232 |
236 |
240 |
244 |
248 |
252 |
256 |
260 |
264 |
268 |
272 |
276 |
280 |
284 |
288 |
292 |
296 |
300 |
304 |
308 |
312 |
316 |
320 |
324 |
328 |
332 |
336 |
340 |
344 |
348 |
352 |
356 |
360 |
364 |
368 |
372 |
376 |
380 |
384 |
388 |
392 |
396 |
400 |
5 |
10 |
15 |
20 |
25 |
30 |
35 |
40 |
45 |
50 |
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
95 |
100 |
105 |
110 |
115 |
120 |
125 |
130 |
135 |
140 |
145 |
150 |
155 |
160 |
165 |
170 |
175 |
180 |
185 |
190 |
195 |
200 |
205 |
210 |
215 |
220 |
225 |
230 |
235 |
240 |
245 |
250 |
255 |
260 |
265 |
270 |
275 |
280 |
285 |
290 |
295 |
300 |
305 |
310 |
315 |
320 |
325 |
330 |
335 |
340 |
345 |
350 |
355 |
360 |
365 |
370 |
375 |
380 |
385 |
390 |
395 |
400 |
405 |
410 |
415 |
420 |
425 |
430 |
435 |
440 |
445 |
450 |
455 |
460 |
465 |
470 |
475 |
480 |
485 |
490 |
495 |
500 |