src/scss/bootstrap-4.0.0-alpha.6/docs/content/tables.md

   1 ---
   2 layout: docs
   3 title: Tables
   4 description: Documentation and examples for styling tables with Bootstrap.
   5 group: content
   6 ---
   7
   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.
   9
  10 ## Contents
  11
  12 * Will be replaced with the ToC, excluding the "Contents" header
  13 {:toc}
  14
  15 ## Examples
  16
  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.
  18
  19 {% example html %}
  20 <table class="table">
  21   <thead>
  22     <tr>
  23       <th>#</th>
  24       <th>First Name</th>
  25       <th>Last Name</th>
  26       <th>Username</th>
  27     </tr>
  28   </thead>
  29   <tbody>
  30     <tr>
  31       <th scope="row">1</th>
  32       <td>Mark</td>
  33       <td>Otto</td>
  34       <td>@mdo</td>
  35     </tr>
  36     <tr>
  37       <th scope="row">2</th>
  38       <td>Jacob</td>
  39       <td>Thornton</td>
  40       <td>@fat</td>
  41     </tr>
  42     <tr>
  43       <th scope="row">3</th>
  44       <td>Larry</td>
  45       <td>the Bird</td>
  46       <td>@twitter</td>
  47     </tr>
  48   </tbody>
  49 </table>
  50 {% endexample %}
  51
  52 You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
  53
  54 {% example html %}
  55 <table class="table table-inverse">
  56   <thead>
  57     <tr>
  58       <th>#</th>
  59       <th>First Name</th>
  60       <th>Last Name</th>
  61       <th>Username</th>
  62     </tr>
  63   </thead>
  64   <tbody>
  65     <tr>
  66       <th scope="row">1</th>
  67       <td>Mark</td>
  68       <td>Otto</td>
  69       <td>@mdo</td>
  70     </tr>
  71     <tr>
  72       <th scope="row">2</th>
  73       <td>Jacob</td>
  74       <td>Thornton</td>
  75       <td>@fat</td>
  76     </tr>
  77     <tr>
  78       <th scope="row">3</th>
  79       <td>Larry</td>
  80       <td>the Bird</td>
  81       <td>@twitter</td>
  82     </tr>
  83   </tbody>
  84 </table>
  85 {% endexample %}
  86
  87 ## Table head options
  88
  89 Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
  90
  91 {% example html %}
  92 <table class="table">
  93   <thead class="thead-inverse">
  94     <tr>
  95       <th>#</th>
  96       <th>First Name</th>
  97       <th>Last Name</th>
  98       <th>Username</th>
  99     </tr>
 100   </thead>
 101   <tbody>
 102     <tr>
 103       <th scope="row">1</th>
 104       <td>Mark</td>
 105       <td>Otto</td>
 106       <td>@mdo</td>
 107     </tr>
 108     <tr>
 109       <th scope="row">2</th>
 110       <td>Jacob</td>
 111       <td>Thornton</td>
 112       <td>@fat</td>
 113     </tr>
 114     <tr>
 115       <th scope="row">3</th>
 116       <td>Larry</td>
 117       <td>the Bird</td>
 118       <td>@twitter</td>
 119     </tr>
 120   </tbody>
 121 </table>
 122
 123 <table class="table">
 124   <thead class="thead-default">
 125     <tr>
 126       <th>#</th>
 127       <th>First Name</th>
 128       <th>Last Name</th>
 129       <th>Username</th>
 130     </tr>
 131   </thead>
 132   <tbody>
 133     <tr>
 134       <th scope="row">1</th>
 135       <td>Mark</td>
 136       <td>Otto</td>
 137       <td>@mdo</td>
 138     </tr>
 139     <tr>
 140       <th scope="row">2</th>
 141       <td>Jacob</td>
 142       <td>Thornton</td>
 143       <td>@fat</td>
 144     </tr>
 145     <tr>
 146       <th scope="row">3</th>
 147       <td>Larry</td>
 148       <td>the Bird</td>
 149       <td>@twitter</td>
 150     </tr>
 151   </tbody>
 152 </table>
 153 {% endexample %}
 154
 155 ## Striped rows
 156
 157 Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
 158
 159 {% example html %}
 160 <table class="table table-striped">
 161   <thead>
 162     <tr>
 163       <th>#</th>
 164       <th>First Name</th>
 165       <th>Last Name</th>
 166       <th>Username</th>
 167     </tr>
 168   </thead>
 169   <tbody>
 170     <tr>
 171       <th scope="row">1</th>
 172       <td>Mark</td>
 173       <td>Otto</td>
 174       <td>@mdo</td>
 175     </tr>
 176     <tr>
 177       <th scope="row">2</th>
 178       <td>Jacob</td>
 179       <td>Thornton</td>
 180       <td>@fat</td>
 181     </tr>
 182     <tr>
 183       <th scope="row">3</th>
 184       <td>Larry</td>
 185       <td>the Bird</td>
 186       <td>@twitter</td>
 187     </tr>
 188   </tbody>
 189 </table>
 190 {% endexample %}
 191
 192 {% example html %}
 193 <table class="table table-striped table-inverse">
 194   <thead>
 195     <tr>
 196       <th>#</th>
 197       <th>First Name</th>
 198       <th>Last Name</th>
 199       <th>Username</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 {% endexample %}
 224
 225 ## Bordered table
 226
 227 Add `.table-bordered` for borders on all sides of the table and cells.
 228
 229 {% example html %}
 230 <table class="table table-bordered">
 231   <thead>
 232     <tr>
 233       <th>#</th>
 234       <th>First Name</th>
 235       <th>Last Name</th>
 236       <th>Username</th>
 237     </tr>
 238   </thead>
 239   <tbody>
 240     <tr>
 241       <th scope="row">1</th>
 242       <td>Mark</td>
 243       <td>Otto</td>
 244       <td>@mdo</td>
 245     </tr>
 246     <tr>
 247       <th scope="row">2</th>
 248       <td>Mark</td>
 249       <td>Otto</td>
 250       <td>@TwBootstrap</td>
 251     </tr>
 252     <tr>
 253       <th scope="row">3</th>
 254       <td>Jacob</td>
 255       <td>Thornton</td>
 256       <td>@fat</td>
 257     </tr>
 258     <tr>
 259       <th scope="row">4</th>
 260       <td colspan="2">Larry the Bird</td>
 261       <td>@twitter</td>
 262     </tr>
 263   </tbody>
 264 </table>
 265 {% endexample %}
 266
 267 {% example html %}
 268 <table class="table table-bordered table-inverse">
 269   <thead>
 270     <tr>
 271       <th>#</th>
 272       <th>First Name</th>
 273       <th>Last Name</th>
 274       <th>Username</th>
 275     </tr>
 276   </thead>
 277   <tbody>
 278     <tr>
 279       <th scope="row">1</th>
 280       <td>Mark</td>
 281       <td>Otto</td>
 282       <td>@mdo</td>
 283     </tr>
 284     <tr>
 285       <th scope="row">2</th>
 286       <td>Mark</td>
 287       <td>Otto</td>
 288       <td>@TwBootstrap</td>
 289     </tr>
 290     <tr>
 291       <th scope="row">3</th>
 292       <td>Jacob</td>
 293       <td>Thornton</td>
 294       <td>@fat</td>
 295     </tr>
 296     <tr>
 297       <th scope="row">4</th>
 298       <td colspan="2">Larry the Bird</td>
 299       <td>@twitter</td>
 300     </tr>
 301   </tbody>
 302 </table>
 303 {% endexample %}
 304
 305 ## Hoverable rows
 306
 307 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 308
 309 {% example html %}
 310 <table class="table table-hover">
 311   <thead>
 312     <tr>
 313       <th>#</th>
 314       <th>First Name</th>
 315       <th>Last Name</th>
 316       <th>Username</th>
 317     </tr>
 318   </thead>
 319   <tbody>
 320     <tr>
 321       <th scope="row">1</th>
 322       <td>Mark</td>
 323       <td>Otto</td>
 324       <td>@mdo</td>
 325     </tr>
 326     <tr>
 327       <th scope="row">2</th>
 328       <td>Jacob</td>
 329       <td>Thornton</td>
 330       <td>@fat</td>
 331     </tr>
 332     <tr>
 333       <th scope="row">3</th>
 334       <td colspan="2">Larry the Bird</td>
 335       <td>@twitter</td>
 336     </tr>
 337   </tbody>
 338 </table>
 339 {% endexample %}
 340
 341 {% example html %}
 342 <table class="table table-hover table-inverse">
 343   <thead>
 344     <tr>
 345       <th>#</th>
 346       <th>First Name</th>
 347       <th>Last Name</th>
 348       <th>Username</th>
 349     </tr>
 350   </thead>
 351   <tbody>
 352     <tr>
 353       <th scope="row">1</th>
 354       <td>Mark</td>
 355       <td>Otto</td>
 356       <td>@mdo</td>
 357     </tr>
 358     <tr>
 359       <th scope="row">2</th>
 360       <td>Jacob</td>
 361       <td>Thornton</td>
 362       <td>@fat</td>
 363     </tr>
 364     <tr>
 365       <th scope="row">3</th>
 366       <td colspan="2">Larry the Bird</td>
 367       <td>@twitter</td>
 368     </tr>
 369   </tbody>
 370 </table>
 371 {% endexample %}
 372
 373 ## Small table
 374
 375 Add `.table-sm` to make tables more compact by cutting cell padding in half.
 376
 377 {% example html %}
 378 <table class="table table-sm">
 379   <thead>
 380     <tr>
 381       <th>#</th>
 382       <th>First Name</th>
 383       <th>Last Name</th>
 384       <th>Username</th>
 385     </tr>
 386   </thead>
 387   <tbody>
 388     <tr>
 389       <th scope="row">1</th>
 390       <td>Mark</td>
 391       <td>Otto</td>
 392       <td>@mdo</td>
 393     </tr>
 394     <tr>
 395       <th scope="row">2</th>
 396       <td>Jacob</td>
 397       <td>Thornton</td>
 398       <td>@fat</td>
 399     </tr>
 400     <tr>
 401       <th scope="row">3</th>
 402       <td colspan="2">Larry the Bird</td>
 403       <td>@twitter</td>
 404     </tr>
 405   </tbody>
 406 </table>
 407 {% endexample %}
 408
 409 {% example html %}
 410 <table class="table table-sm table-inverse">
 411   <thead>
 412     <tr>
 413       <th>#</th>
 414       <th>First Name</th>
 415       <th>Last Name</th>
 416       <th>Username</th>
 417     </tr>
 418   </thead>
 419   <tbody>
 420     <tr>
 421       <th scope="row">1</th>
 422       <td>Mark</td>
 423       <td>Otto</td>
 424       <td>@mdo</td>
 425     </tr>
 426     <tr>
 427       <th scope="row">2</th>
 428       <td>Jacob</td>
 429       <td>Thornton</td>
 430       <td>@fat</td>
 431     </tr>
 432     <tr>
 433       <th scope="row">3</th>
 434       <td colspan="2">Larry the Bird</td>
 435       <td>@twitter</td>
 436     </tr>
 437   </tbody>
 438 </table>
 439 {% endexample %}
 440
 441 ## Contextual classes
 442
 443 Use contextual classes to color table rows or individual cells.
 444
 445 <table class="table table-bordered table-striped table-responsive">
 446   <colgroup>
 447     <col class="col-1">
 448     <col class="col-7">
 449   </colgroup>
 450   <thead>
 451     <tr>
 452       <th>Class</th>
 453       <th>Description</th>
 454     </tr>
 455   </thead>
 456   <tbody>
 457     <tr>
 458       <th scope="row">
 459         <code>.table-active</code>
 460       </th>
 461       <td>Applies the hover color to a particular row or cell</td>
 462     </tr>
 463     <tr>
 464       <th scope="row">
 465         <code>.table-success</code>
 466       </th>
 467       <td>Indicates a successful or positive action</td>
 468     </tr>
 469     <tr>
 470       <th scope="row">
 471         <code>.table-info</code>
 472       </th>
 473       <td>Indicates a neutral informative change or action</td>
 474     </tr>
 475     <tr>
 476       <th scope="row">
 477         <code>.table-warning</code>
 478       </th>
 479       <td>Indicates a warning that might need attention</td>
 480     </tr>
 481     <tr>
 482       <th scope="row">
 483         <code>.table-danger</code>
 484       </th>
 485       <td>Indicates a dangerous or potentially negative action</td>
 486     </tr>
 487   </tbody>
 488 </table>
 489
 490 <div class="bd-example">
 491   <table class="table">
 492     <thead>
 493       <tr>
 494         <th>#</th>
 495         <th>Column heading</th>
 496         <th>Column heading</th>
 497         <th>Column heading</th>
 498       </tr>
 499     </thead>
 500     <tbody>
 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>
 506       </tr>
 507       <tr>
 508         <th scope="row">2</th>
 509         <td>Column content</td>
 510         <td>Column content</td>
 511         <td>Column content</td>
 512       </tr>
 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>
 518       </tr>
 519       <tr>
 520         <th scope="row">4</th>
 521         <td>Column content</td>
 522         <td>Column content</td>
 523         <td>Column content</td>
 524       </tr>
 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>
 530       </tr>
 531       <tr>
 532         <th scope="row">6</th>
 533         <td>Column content</td>
 534         <td>Column content</td>
 535         <td>Column content</td>
 536       </tr>
 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>
 542       </tr>
 543       <tr>
 544         <th scope="row">8</th>
 545         <td>Column content</td>
 546         <td>Column content</td>
 547         <td>Column content</td>
 548       </tr>
 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>
 554       </tr>
 555     </tbody>
 556   </table>
 557 </div>
 558
 559 {% highlight html %}
 560 <!-- On rows -->
 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>
 566
 567 <!-- On cells (`td` or `th`) -->
 568 <tr>
 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>
 574 </tr>
 575 {% endhighlight %}
 576
 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.
 578
 579 <div class="bd-example">
 580   <table class="table table-inverse">
 581     <thead>
 582       <tr>
 583         <th>#</th>
 584         <th>Column heading</th>
 585         <th>Column heading</th>
 586         <th>Column heading</th>
 587       </tr>
 588     </thead>
 589     <tbody>
 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>
 595       </tr>
 596       <tr>
 597         <th scope="row">2</th>
 598         <td>Column content</td>
 599         <td>Column content</td>
 600         <td>Column content</td>
 601       </tr>
 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>
 607       </tr>
 608       <tr>
 609         <th scope="row">4</th>
 610         <td>Column content</td>
 611         <td>Column content</td>
 612         <td>Column content</td>
 613       </tr>
 614       <tr class="bg-info">
 615         <th scope="row">5</th>
 616         <td>Column content</td>
 617         <td>Column content</td>
 618         <td>Column content</td>
 619       </tr>
 620       <tr>
 621         <th scope="row">6</th>
 622         <td>Column content</td>
 623         <td>Column content</td>
 624         <td>Column content</td>
 625       </tr>
 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>
 631       </tr>
 632       <tr>
 633         <th scope="row">8</th>
 634         <td>Column content</td>
 635         <td>Column content</td>
 636         <td>Column content</td>
 637       </tr>
 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>
 643       </tr>
 644     </tbody>
 645   </table>
 646 </div>
 647
 648 {% highlight html %}
 649 <!-- On rows -->
 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>
 655
 656 <!-- On cells (`td` or `th`) -->
 657 <tr>
 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>
 663 </tr>
 664 {% endhighlight %}
 665
 666 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
 667 {{ callout-include | markdownify }}
 668
 669 ## Responsive tables
 670
 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.
 672
 673 {% callout warning %}
 674 #### Vertical clipping/truncation
 675
 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.
 677 {% endcallout %}
 678
 679 <div class="bd-example">
 680   <table class="table table-responsive">
 681     <thead>
 682       <tr>
 683         <th>#</th>
 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>
 690       </tr>
 691     </thead>
 692     <tbody>
 693       <tr>
 694         <th scope="row">1</th>
 695         <td>Table cell</td>
 696         <td>Table cell</td>
 697         <td>Table cell</td>
 698         <td>Table cell</td>
 699         <td>Table cell</td>
 700         <td>Table cell</td>
 701       </tr>
 702       <tr>
 703         <th scope="row">2</th>
 704         <td>Table cell</td>
 705         <td>Table cell</td>
 706         <td>Table cell</td>
 707         <td>Table cell</td>
 708         <td>Table cell</td>
 709         <td>Table cell</td>
 710       </tr>
 711       <tr>
 712         <th scope="row">3</th>
 713         <td>Table cell</td>
 714         <td>Table cell</td>
 715         <td>Table cell</td>
 716         <td>Table cell</td>
 717         <td>Table cell</td>
 718         <td>Table cell</td>
 719       </tr>
 720     </tbody>
 721   </table>
 722
 723   <table class="table table-bordered table-responsive">
 724     <thead>
 725       <tr>
 726         <th>#</th>
 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>
 733       </tr>
 734     </thead>
 735     <tbody>
 736       <tr>
 737         <th scope="row">1</th>
 738         <td>Table cell</td>
 739         <td>Table cell</td>
 740         <td>Table cell</td>
 741         <td>Table cell</td>
 742         <td>Table cell</td>
 743         <td>Table cell</td>
 744       </tr>
 745       <tr>
 746         <th scope="row">2</th>
 747         <td>Table cell</td>
 748         <td>Table cell</td>
 749         <td>Table cell</td>
 750         <td>Table cell</td>
 751         <td>Table cell</td>
 752         <td>Table cell</td>
 753       </tr>
 754       <tr>
 755         <th scope="row">3</th>
 756         <td>Table cell</td>
 757         <td>Table cell</td>
 758         <td>Table cell</td>
 759         <td>Table cell</td>
 760         <td>Table cell</td>
 761         <td>Table cell</td>
 762       </tr>
 763     </tbody>
 764   </table>
 765 </div>
 766
 767 {% highlight html %}
 768 <table class="table table-responsive">
 769   ...
 770 </table>
 771 {% endhighlight %}