Stripped personal data from development repository
view | history | commit | commitdiff
Samo Penic
2019-02-20 83c3f647c35477564b77cbc5b36d37d793d5442a
commit | author | age
83c3f6 1 ---
SP 2 layout: docs
3 title: Tables
4 description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
5 group: content
6 toc: true
7 ---
8
9 ## Examples
10
11 Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes.
12
13 Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
14
15 {% capture example %}
16 <table class="table">
17   <thead>
18     <tr>
19       <th scope="col">#</th>
20       <th scope="col">First</th>
21       <th scope="col">Last</th>
22       <th scope="col">Handle</th>
23     </tr>
24   </thead>
25   <tbody>
26     <tr>
27       <th scope="row">1</th>
28       <td>Mark</td>
29       <td>Otto</td>
30       <td>@mdo</td>
31     </tr>
32     <tr>
33       <th scope="row">2</th>
34       <td>Jacob</td>
35       <td>Thornton</td>
36       <td>@fat</td>
37     </tr>
38     <tr>
39       <th scope="row">3</th>
40       <td>Larry</td>
41       <td>the Bird</td>
42       <td>@twitter</td>
43     </tr>
44   </tbody>
45 </table>
46 {% endcapture %}
47 {% include example.html content=example %}
48
49 You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
50
51 {% capture example %}
52 <table class="table table-dark">
53   <thead>
54     <tr>
55       <th scope="col">#</th>
56       <th scope="col">First</th>
57       <th scope="col">Last</th>
58       <th scope="col">Handle</th>
59     </tr>
60   </thead>
61   <tbody>
62     <tr>
63       <th scope="row">1</th>
64       <td>Mark</td>
65       <td>Otto</td>
66       <td>@mdo</td>
67     </tr>
68     <tr>
69       <th scope="row">2</th>
70       <td>Jacob</td>
71       <td>Thornton</td>
72       <td>@fat</td>
73     </tr>
74     <tr>
75       <th scope="row">3</th>
76       <td>Larry</td>
77       <td>the Bird</td>
78       <td>@twitter</td>
79     </tr>
80   </tbody>
81 </table>
82 {% endcapture %}
83 {% include example.html content=example %}
84
85 ## Table head options
86
87 Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.
88
89 {% capture example %}
90 <table class="table">
91   <thead class="thead-dark">
92     <tr>
93       <th scope="col">#</th>
94       <th scope="col">First</th>
95       <th scope="col">Last</th>
96       <th scope="col">Handle</th>
97     </tr>
98   </thead>
99   <tbody>
100     <tr>
101       <th scope="row">1</th>
102       <td>Mark</td>
103       <td>Otto</td>
104       <td>@mdo</td>
105     </tr>
106     <tr>
107       <th scope="row">2</th>
108       <td>Jacob</td>
109       <td>Thornton</td>
110       <td>@fat</td>
111     </tr>
112     <tr>
113       <th scope="row">3</th>
114       <td>Larry</td>
115       <td>the Bird</td>
116       <td>@twitter</td>
117     </tr>
118   </tbody>
119 </table>
120
121 <table class="table">
122   <thead class="thead-light">
123     <tr>
124       <th scope="col">#</th>
125       <th scope="col">First</th>
126       <th scope="col">Last</th>
127       <th scope="col">Handle</th>
128     </tr>
129   </thead>
130   <tbody>
131     <tr>
132       <th scope="row">1</th>
133       <td>Mark</td>
134       <td>Otto</td>
135       <td>@mdo</td>
136     </tr>
137     <tr>
138       <th scope="row">2</th>
139       <td>Jacob</td>
140       <td>Thornton</td>
141       <td>@fat</td>
142     </tr>
143     <tr>
144       <th scope="row">3</th>
145       <td>Larry</td>
146       <td>the Bird</td>
147       <td>@twitter</td>
148     </tr>
149   </tbody>
150 </table>
151 {% endcapture %}
152 {% include example.html content=example %}
153
154 ## Striped rows
155
156 Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
157
158 {% capture example %}
159 <table class="table table-striped">
160   <thead>
161     <tr>
162       <th scope="col">#</th>
163       <th scope="col">First</th>
164       <th scope="col">Last</th>
165       <th scope="col">Handle</th>
166     </tr>
167   </thead>
168   <tbody>
169     <tr>
170       <th scope="row">1</th>
171       <td>Mark</td>
172       <td>Otto</td>
173       <td>@mdo</td>
174     </tr>
175     <tr>
176       <th scope="row">2</th>
177       <td>Jacob</td>
178       <td>Thornton</td>
179       <td>@fat</td>
180     </tr>
181     <tr>
182       <th scope="row">3</th>
183       <td>Larry</td>
184       <td>the Bird</td>
185       <td>@twitter</td>
186     </tr>
187   </tbody>
188 </table>
189 {% endcapture %}
190 {% include example.html content=example %}
191
192 {% capture example %}
193 <table class="table table-striped table-dark">
194   <thead>
195     <tr>
196       <th scope="col">#</th>
197       <th scope="col">First</th>
198       <th scope="col">Last</th>
199       <th scope="col">Handle</th>
200     </tr>
201   </thead>
202   <tbody>
203     <tr>
204       <th scope="row">1</th>
205       <td>Mark</td>
206       <td>Otto</td>
207       <td>@mdo</td>
208     </tr>
209     <tr>
210       <th scope="row">2</th>
211       <td>Jacob</td>
212       <td>Thornton</td>
213       <td>@fat</td>
214     </tr>
215     <tr>
216       <th scope="row">3</th>
217       <td>Larry</td>
218       <td>the Bird</td>
219       <td>@twitter</td>
220     </tr>
221   </tbody>
222 </table>
223 {% endcapture %}
224 {% include example.html content=example %}
225
226 ## Bordered table
227
228 Add `.table-bordered` for borders on all sides of the table and cells.
229
230 {% capture example %}
231 <table class="table table-bordered">
232   <thead>
233     <tr>
234       <th scope="col">#</th>
235       <th scope="col">First</th>
236       <th scope="col">Last</th>
237       <th scope="col">Handle</th>
238     </tr>
239   </thead>
240   <tbody>
241     <tr>
242       <th scope="row">1</th>
243       <td>Mark</td>
244       <td>Otto</td>
245       <td>@mdo</td>
246     </tr>
247     <tr>
248       <th scope="row">2</th>
249       <td>Jacob</td>
250       <td>Thornton</td>
251       <td>@fat</td>
252     </tr>
253     <tr>
254       <th scope="row">3</th>
255       <td colspan="2">Larry the Bird</td>
256       <td>@twitter</td>
257     </tr>
258   </tbody>
259 </table>
260 {% endcapture %}
261 {% include example.html content=example %}
262
263 {% capture example %}
264 <table class="table table-bordered table-dark">
265   <thead>
266     <tr>
267       <th scope="col">#</th>
268       <th scope="col">First</th>
269       <th scope="col">Last</th>
270       <th scope="col">Handle</th>
271     </tr>
272   </thead>
273   <tbody>
274     <tr>
275       <th scope="row">1</th>
276       <td>Mark</td>
277       <td>Otto</td>
278       <td>@mdo</td>
279     </tr>
280     <tr>
281       <th scope="row">2</th>
282       <td>Jacob</td>
283       <td>Thornton</td>
284       <td>@fat</td>
285     </tr>
286     <tr>
287       <th scope="row">3</th>
288       <td colspan="2">Larry the Bird</td>
289       <td>@twitter</td>
290     </tr>
291   </tbody>
292 </table>
293 {% endcapture %}
294 {% include example.html content=example %}
295
296 ## Borderless table
297
298 Add `.table-borderless` for a table without borders.
299
300 {% capture example %}
301 <table class="table table-borderless">
302   <thead>
303     <tr>
304       <th scope="col">#</th>
305       <th scope="col">First</th>
306       <th scope="col">Last</th>
307       <th scope="col">Handle</th>
308     </tr>
309   </thead>
310   <tbody>
311     <tr>
312       <th scope="row">1</th>
313       <td>Mark</td>
314       <td>Otto</td>
315       <td>@mdo</td>
316     </tr>
317     <tr>
318       <th scope="row">2</th>
319       <td>Jacob</td>
320       <td>Thornton</td>
321       <td>@fat</td>
322     </tr>
323     <tr>
324       <th scope="row">3</th>
325       <td colspan="2">Larry the Bird</td>
326       <td>@twitter</td>
327     </tr>
328   </tbody>
329 </table>
330 {% endcapture %}
331 {% include example.html content=example %}
332
333 `.table-borderless` can also be used on dark tables.
334
335 {% capture example %}
336 <table class="table table-borderless table-dark">
337   <thead>
338     <tr>
339       <th scope="col">#</th>
340       <th scope="col">First</th>
341       <th scope="col">Last</th>
342       <th scope="col">Handle</th>
343     </tr>
344   </thead>
345   <tbody>
346     <tr>
347       <th scope="row">1</th>
348       <td>Mark</td>
349       <td>Otto</td>
350       <td>@mdo</td>
351     </tr>
352     <tr>
353       <th scope="row">2</th>
354       <td>Jacob</td>
355       <td>Thornton</td>
356       <td>@fat</td>
357     </tr>
358     <tr>
359       <th scope="row">3</th>
360       <td colspan="2">Larry the Bird</td>
361       <td>@twitter</td>
362     </tr>
363   </tbody>
364 </table>
365 {% endcapture %}
366 {% include example.html content=example %}
367
368 ## Hoverable rows
369
370 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
371
372 {% capture example %}
373 <table class="table table-hover">
374   <thead>
375     <tr>
376       <th scope="col">#</th>
377       <th scope="col">First</th>
378       <th scope="col">Last</th>
379       <th scope="col">Handle</th>
380     </tr>
381   </thead>
382   <tbody>
383     <tr>
384       <th scope="row">1</th>
385       <td>Mark</td>
386       <td>Otto</td>
387       <td>@mdo</td>
388     </tr>
389     <tr>
390       <th scope="row">2</th>
391       <td>Jacob</td>
392       <td>Thornton</td>
393       <td>@fat</td>
394     </tr>
395     <tr>
396       <th scope="row">3</th>
397       <td colspan="2">Larry the Bird</td>
398       <td>@twitter</td>
399     </tr>
400   </tbody>
401 </table>
402 {% endcapture %}
403 {% include example.html content=example %}
404
405 {% capture example %}
406 <table class="table table-hover table-dark">
407   <thead>
408     <tr>
409       <th scope="col">#</th>
410       <th scope="col">First</th>
411       <th scope="col">Last</th>
412       <th scope="col">Handle</th>
413     </tr>
414   </thead>
415   <tbody>
416     <tr>
417       <th scope="row">1</th>
418       <td>Mark</td>
419       <td>Otto</td>
420       <td>@mdo</td>
421     </tr>
422     <tr>
423       <th scope="row">2</th>
424       <td>Jacob</td>
425       <td>Thornton</td>
426       <td>@fat</td>
427     </tr>
428     <tr>
429       <th scope="row">3</th>
430       <td colspan="2">Larry the Bird</td>
431       <td>@twitter</td>
432     </tr>
433   </tbody>
434 </table>
435 {% endcapture %}
436 {% include example.html content=example %}
437
438 ## Small table
439
440 Add `.table-sm` to make tables more compact by cutting cell padding in half.
441
442 {% capture example %}
443 <table class="table table-sm">
444   <thead>
445     <tr>
446       <th scope="col">#</th>
447       <th scope="col">First</th>
448       <th scope="col">Last</th>
449       <th scope="col">Handle</th>
450     </tr>
451   </thead>
452   <tbody>
453     <tr>
454       <th scope="row">1</th>
455       <td>Mark</td>
456       <td>Otto</td>
457       <td>@mdo</td>
458     </tr>
459     <tr>
460       <th scope="row">2</th>
461       <td>Jacob</td>
462       <td>Thornton</td>
463       <td>@fat</td>
464     </tr>
465     <tr>
466       <th scope="row">3</th>
467       <td colspan="2">Larry the Bird</td>
468       <td>@twitter</td>
469     </tr>
470   </tbody>
471 </table>
472 {% endcapture %}
473 {% include example.html content=example %}
474
475 {% capture example %}
476 <table class="table table-sm table-dark">
477   <thead>
478     <tr>
479       <th scope="col">#</th>
480       <th scope="col">First</th>
481       <th scope="col">Last</th>
482       <th scope="col">Handle</th>
483     </tr>
484   </thead>
485   <tbody>
486     <tr>
487       <th scope="row">1</th>
488       <td>Mark</td>
489       <td>Otto</td>
490       <td>@mdo</td>
491     </tr>
492     <tr>
493       <th scope="row">2</th>
494       <td>Jacob</td>
495       <td>Thornton</td>
496       <td>@fat</td>
497     </tr>
498     <tr>
499       <th scope="row">3</th>
500       <td colspan="2">Larry the Bird</td>
501       <td>@twitter</td>
502     </tr>
503   </tbody>
504 </table>
505 {% endcapture %}
506 {% include example.html content=example %}
507
508 ## Contextual classes
509
510 Use contextual classes to color table rows or individual cells.
511
512 <div class="bd-example">
513   <table class="table">
514     <thead>
515       <tr>
516         <th scope="col">Class</th>
517         <th scope="col">Heading</th>
518         <th scope="col">Heading</th>
519       </tr>
520     </thead>
521     <tbody>
522       <tr class="table-active">
523         <th scope="row">Active</th>
524         <td>Cell</td>
525         <td>Cell</td>
526       </tr>
527       <tr>
528         <th scope="row">Default</th>
529         <td>Cell</td>
530         <td>Cell</td>
531       </tr>
532
533       {% for color in site.data.theme-colors %}
534       <tr class="table-{{ color.name }}">
535         <th scope="row">{{ color.name | capitalize }}</th>
536         <td>Cell</td>
537         <td>Cell</td>
538       </tr>{% endfor %}
539     </tbody>
540   </table>
541 </div>
542
543 {% highlight html %}
544 <!-- On rows -->
545 <tr class="table-active">...</tr>
546 {% for color in site.data.theme-colors %}
547 <tr class="table-{{ color.name }}">...</tr>{% endfor %}
548
549 <!-- On cells (`td` or `th`) -->
550 <tr>
551   <td class="table-active">...</td>
552   {% for color in site.data.theme-colors %}
553   <td class="table-{{ color.name }}">...</td>{% endfor %}
554 </tr>
555 {% endhighlight %}
556
557 Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
558
559 <div class="bd-example">
560   <table class="table table-dark">
561     <thead>
562       <tr>
563         <th scope="col">#</th>
564         <th scope="col">Heading</th>
565         <th scope="col">Heading</th>
566       </tr>
567     </thead>
568     <tbody>
569       <tr class="bg-primary">
570         <th scope="row">1</th>
571         <td>Cell</td>
572         <td>Cell</td>
573       </tr>
574       <tr>
575         <th scope="row">2</th>
576         <td>Cell</td>
577         <td>Cell</td>
578       </tr>
579       <tr class="bg-success">
580         <th scope="row">3</th>
581         <td>Cell</td>
582         <td>Cell</td>
583       </tr>
584       <tr>
585         <th scope="row">4</th>
586         <td>Cell</td>
587         <td>Cell</td>
588       </tr>
589       <tr class="bg-info">
590         <th scope="row">5</th>
591         <td>Cell</td>
592         <td>Cell</td>
593       </tr>
594       <tr>
595         <th scope="row">6</th>
596         <td>Cell</td>
597         <td>Cell</td>
598       </tr>
599       <tr class="bg-warning">
600         <th scope="row">7</th>
601         <td>Cell</td>
602         <td>Cell</td>
603       </tr>
604       <tr>
605         <th scope="row">8</th>
606         <td>Cell</td>
607         <td>Cell</td>
608       </tr>
609       <tr class="bg-danger">
610         <th scope="row">9</th>
611         <td>Cell</td>
612         <td>Cell</td>
613       </tr>
614     </tbody>
615   </table>
616 </div>
617
618 {% highlight html %}
619 <!-- On rows -->
620 <tr class="bg-primary">...</tr>
621 <tr class="bg-success">...</tr>
622 <tr class="bg-warning">...</tr>
623 <tr class="bg-danger">...</tr>
624 <tr class="bg-info">...</tr>
625
626 <!-- On cells (`td` or `th`) -->
627 <tr>
628   <td class="bg-primary">...</td>
629   <td class="bg-success">...</td>
630   <td class="bg-warning">...</td>
631   <td class="bg-danger">...</td>
632   <td class="bg-info">...</td>
633 </tr>
634 {% endhighlight %}
635
636 {% include callout-warning-color-assistive-technologies.md %}
637
638 Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
639
640 {% include callout-info-mediaqueries-breakpoints.md %}
641
642 ## Captions
643
644 A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
645
646 {% capture example %}
647 <table class="table">
648   <caption>List of users</caption>
649   <thead>
650     <tr>
651       <th scope="col">#</th>
652       <th scope="col">First</th>
653       <th scope="col">Last</th>
654       <th scope="col">Handle</th>
655     </tr>
656   </thead>
657   <tbody>
658     <tr>
659       <th scope="row">1</th>
660       <td>Mark</td>
661       <td>Otto</td>
662       <td>@mdo</td>
663     </tr>
664     <tr>
665       <th scope="row">2</th>
666       <td>Jacob</td>
667       <td>Thornton</td>
668       <td>@fat</td>
669     </tr>
670     <tr>
671       <th scope="row">3</th>
672       <td>Larry</td>
673       <td>the Bird</td>
674       <td>@twitter</td>
675     </tr>
676   </tbody>
677 </table>
678 {% endcapture %}
679 {% include example.html content=example %}
680
681 ## Responsive tables
682
683 Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.
684
685 {% capture callout %}
686 ##### Vertical clipping/truncation
687
688 Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
689 {% endcapture %}
690 {% include callout.html content=callout type="warning" %}
691
692 ### Always responsive
693
694 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
695
696 <div class="bd-example">
697   <div class="table-responsive">
698     <table class="table">
699       <thead>
700         <tr>
701           <th scope="col">#</th>
702           <th scope="col">Heading</th>
703           <th scope="col">Heading</th>
704           <th scope="col">Heading</th>
705           <th scope="col">Heading</th>
706           <th scope="col">Heading</th>
707           <th scope="col">Heading</th>
708           <th scope="col">Heading</th>
709           <th scope="col">Heading</th>
710           <th scope="col">Heading</th>
711         </tr>
712       </thead>
713       <tbody>
714         <tr>
715           <th scope="row">1</th>
716           <td>Cell</td>
717           <td>Cell</td>
718           <td>Cell</td>
719           <td>Cell</td>
720           <td>Cell</td>
721           <td>Cell</td>
722           <td>Cell</td>
723           <td>Cell</td>
724           <td>Cell</td>
725         </tr>
726         <tr>
727           <th scope="row">2</th>
728           <td>Cell</td>
729           <td>Cell</td>
730           <td>Cell</td>
731           <td>Cell</td>
732           <td>Cell</td>
733           <td>Cell</td>
734           <td>Cell</td>
735           <td>Cell</td>
736           <td>Cell</td>
737         </tr>
738         <tr>
739           <th scope="row">3</th>
740           <td>Cell</td>
741           <td>Cell</td>
742           <td>Cell</td>
743           <td>Cell</td>
744           <td>Cell</td>
745           <td>Cell</td>
746           <td>Cell</td>
747           <td>Cell</td>
748           <td>Cell</td>
749         </tr>
750       </tbody>
751     </table>
752   </div>
753 </div>
754
755 {% highlight html %}
756 <div class="table-responsive">
757   <table class="table">
758     ...
759   </table>
760 </div>
761 {% endhighlight %}
762
763 ### Breakpoint specific
764
765 Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
766
767 **These tables may appear broken until their responsive styles apply at specific viewport widths.**
768
769 {% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
770 <div class="bd-example">
771 <div class="table-responsive{{ bp.abbr }}">
772   <table class="table">
773     <thead>
774       <tr>
775         <th scope="col">#</th>
776         <th scope="col">Heading</th>
777         <th scope="col">Heading</th>
778         <th scope="col">Heading</th>
779         <th scope="col">Heading</th>
780         <th scope="col">Heading</th>
781         <th scope="col">Heading</th>
782         <th scope="col">Heading</th>
783         <th scope="col">Heading</th>
784       </tr>
785     </thead>
786     <tbody>
787       <tr>
788         <th scope="row">1</th>
789         <td>Cell</td>
790         <td>Cell</td>
791         <td>Cell</td>
792         <td>Cell</td>
793         <td>Cell</td>
794         <td>Cell</td>
795         <td>Cell</td>
796         <td>Cell</td>
797       </tr>
798       <tr>
799         <th scope="row">2</th>
800         <td>Cell</td>
801         <td>Cell</td>
802         <td>Cell</td>
803         <td>Cell</td>
804         <td>Cell</td>
805         <td>Cell</td>
806         <td>Cell</td>
807         <td>Cell</td>
808       </tr>
809       <tr>
810         <th scope="row">3</th>
811         <td>Cell</td>
812         <td>Cell</td>
813         <td>Cell</td>
814         <td>Cell</td>
815         <td>Cell</td>
816         <td>Cell</td>
817         <td>Cell</td>
818         <td>Cell</td>
819       </tr>
820     </tbody>
821   </table>
822 </div>
823 </div>
824 {% highlight html %}
825 <div class="table-responsive{{ bp.abbr }}">
826   <table class="table">
827     ...
828   </table>
829 </div>
830 {% endhighlight %}
831 {% endunless %}{% endfor %}