4 description: Documentation and examples for styling tables with Bootstrap.
8 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 * Will be replaced with the ToC, excluding the "Contents" header
17 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.
31 <th scope="row">1</th>
37 <th scope="row">2</th>
43 <th scope="row">3</th>
52 You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
55 <table class="table table-inverse">
66 <th scope="row">1</th>
72 <th scope="row">2</th>
78 <th scope="row">3</th>
89 Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
93 <thead class="thead-inverse">
103 <th scope="row">1</th>
109 <th scope="row">2</th>
115 <th scope="row">3</th>
123 <table class="table">
124 <thead class="thead-default">
134 <th scope="row">1</th>
140 <th scope="row">2</th>
146 <th scope="row">3</th>
157 Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
160 <table class="table table-striped">
171 <th scope="row">1</th>
177 <th scope="row">2</th>
183 <th scope="row">3</th>
193 <table class="table table-striped table-inverse">
204 <th scope="row">1</th>
210 <th scope="row">2</th>
216 <th scope="row">3</th>
227 Add `.table-bordered` for borders on all sides of the table and cells.
230 <table class="table table-bordered">
241 <th scope="row">1</th>
247 <th scope="row">2</th>
250 <td>@TwBootstrap</td>
253 <th scope="row">3</th>
259 <th scope="row">4</th>
260 <td colspan="2">Larry the Bird</td>
268 <table class="table table-bordered table-inverse">
279 <th scope="row">1</th>
285 <th scope="row">2</th>
288 <td>@TwBootstrap</td>
291 <th scope="row">3</th>
297 <th scope="row">4</th>
298 <td colspan="2">Larry the Bird</td>
307 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
310 <table class="table table-hover">
321 <th scope="row">1</th>
327 <th scope="row">2</th>
333 <th scope="row">3</th>
334 <td colspan="2">Larry the Bird</td>
342 <table class="table table-hover table-inverse">
353 <th scope="row">1</th>
359 <th scope="row">2</th>
365 <th scope="row">3</th>
366 <td colspan="2">Larry the Bird</td>
375 Add `.table-sm` to make tables more compact by cutting cell padding in half.
378 <table class="table table-sm">
389 <th scope="row">1</th>
395 <th scope="row">2</th>
401 <th scope="row">3</th>
402 <td colspan="2">Larry the Bird</td>
410 <table class="table table-sm table-inverse">
421 <th scope="row">1</th>
427 <th scope="row">2</th>
433 <th scope="row">3</th>
434 <td colspan="2">Larry the Bird</td>
441 ## Contextual classes
443 Use contextual classes to color table rows or individual cells.
445 <table class="table table-bordered table-striped table-responsive">
459 <code>.table-active</code>
461 <td>Applies the hover color to a particular row or cell</td>
465 <code>.table-success</code>
467 <td>Indicates a successful or positive action</td>
471 <code>.table-info</code>
473 <td>Indicates a neutral informative change or action</td>
477 <code>.table-warning</code>
479 <td>Indicates a warning that might need attention</td>
483 <code>.table-danger</code>
485 <td>Indicates a dangerous or potentially negative action</td>
490 <div class="bd-example">
491 <table class="table">
495 <th>Column heading</th>
496 <th>Column heading</th>
497 <th>Column heading</th>
501 <tr class="table-active">
502 <th scope="row">1</th>
503 <td>Column content</td>
504 <td>Column content</td>
505 <td>Column content</td>
508 <th scope="row">2</th>
509 <td>Column content</td>
510 <td>Column content</td>
511 <td>Column content</td>
513 <tr class="table-success">
514 <th scope="row">3</th>
515 <td>Column content</td>
516 <td>Column content</td>
517 <td>Column content</td>
520 <th scope="row">4</th>
521 <td>Column content</td>
522 <td>Column content</td>
523 <td>Column content</td>
525 <tr class="table-info">
526 <th scope="row">5</th>
527 <td>Column content</td>
528 <td>Column content</td>
529 <td>Column content</td>
532 <th scope="row">6</th>
533 <td>Column content</td>
534 <td>Column content</td>
535 <td>Column content</td>
537 <tr class="table-warning">
538 <th scope="row">7</th>
539 <td>Column content</td>
540 <td>Column content</td>
541 <td>Column content</td>
544 <th scope="row">8</th>
545 <td>Column content</td>
546 <td>Column content</td>
547 <td>Column content</td>
549 <tr class="table-danger">
550 <th scope="row">9</th>
551 <td>Column content</td>
552 <td>Column content</td>
553 <td>Column content</td>
561 <tr class="table-active">...</tr>
562 <tr class="table-success">...</tr>
563 <tr class="table-warning">...</tr>
564 <tr class="table-danger">...</tr>
565 <tr class="table-info">...</tr>
567 <!-- On cells (`td` or `th`) -->
569 <td class="table-active">...</td>
570 <td class="table-success">...</td>
571 <td class="table-warning">...</td>
572 <td class="table-danger">...</td>
573 <td class="table-info">...</td>
577 Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/utilities/colors/) to achieve similar styles.
579 <div class="bd-example">
580 <table class="table table-inverse">
584 <th>Column heading</th>
585 <th>Column heading</th>
586 <th>Column heading</th>
590 <tr class="bg-primary">
591 <th scope="row">1</th>
592 <td>Column content</td>
593 <td>Column content</td>
594 <td>Column content</td>
597 <th scope="row">2</th>
598 <td>Column content</td>
599 <td>Column content</td>
600 <td>Column content</td>
602 <tr class="bg-success">
603 <th scope="row">3</th>
604 <td>Column content</td>
605 <td>Column content</td>
606 <td>Column content</td>
609 <th scope="row">4</th>
610 <td>Column content</td>
611 <td>Column content</td>
612 <td>Column content</td>
615 <th scope="row">5</th>
616 <td>Column content</td>
617 <td>Column content</td>
618 <td>Column content</td>
621 <th scope="row">6</th>
622 <td>Column content</td>
623 <td>Column content</td>
624 <td>Column content</td>
626 <tr class="bg-warning">
627 <th scope="row">7</th>
628 <td>Column content</td>
629 <td>Column content</td>
630 <td>Column content</td>
633 <th scope="row">8</th>
634 <td>Column content</td>
635 <td>Column content</td>
636 <td>Column content</td>
638 <tr class="bg-danger">
639 <th scope="row">9</th>
640 <td>Column content</td>
641 <td>Column content</td>
642 <td>Column content</td>
650 <tr class="bg-primary">...</tr>
651 <tr class="bg-success">...</tr>
652 <tr class="bg-warning">...</tr>
653 <tr class="bg-danger">...</tr>
654 <tr class="bg-info">...</tr>
656 <!-- On cells (`td` or `th`) -->
658 <td class="bg-primary">...</td>
659 <td class="bg-success">...</td>
660 <td class="bg-warning">...</td>
661 <td class="bg-danger">...</td>
662 <td class="bg-info">...</td>
666 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
667 {{ callout-include | markdownify }}
671 Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
673 {% callout warning %}
674 #### Vertical clipping/truncation
676 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.
679 <div class="bd-example">
680 <table class="table table-responsive">
684 <th>Table heading</th>
685 <th>Table heading</th>
686 <th>Table heading</th>
687 <th>Table heading</th>
688 <th>Table heading</th>
689 <th>Table heading</th>
694 <th scope="row">1</th>
703 <th scope="row">2</th>
712 <th scope="row">3</th>
723 <table class="table table-bordered table-responsive">
727 <th>Table heading</th>
728 <th>Table heading</th>
729 <th>Table heading</th>
730 <th>Table heading</th>
731 <th>Table heading</th>
732 <th>Table heading</th>
737 <th scope="row">1</th>
746 <th scope="row">2</th>
755 <th scope="row">3</th>
768 <table class="table table-responsive">