Table
For user to check they list
Table with outer spacing
Using the most basic table up,here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.
| NAME | RATE | SKILL |
|---|---|---|
| Michael Right | $15/hr | UI/UX |
| Morgan Vanblum | $13/hr | Graphic concepts |
| Tiffani Blogz | $15/hr | Animation |
| Ashley Boul | $15/hr | Animation |
| Mikkey Mice | $15/hr | Animation |
Table without outer spacing
Using the most basic table up,here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.
| NAME | RATE | SKILL |
|---|---|---|
| Michael Right | $15/hr | UI/UX |
| Morgan Vanblum | $13/hr | Graphic concepts |
| Tiffani Blogz | $15/hr | Animation |
| Ashley Boul | $15/hr | Animation |
| Mikkey Mice | $15/hr | Animation |
Inverse table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
You can also invert the colors—with dark text on light backgrounds—with .table-light.
Table head options
Similar to tables and dark tables,use the modifier classes .thead-lightor .thead-darkto make <thead>s appear light or dark gray.
Striped rows
Use .table-stripedto add zebra-striping to any table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
Striped inverse dark
Use .table-darkwith .table-stripedto add zebra-striping to any inverse table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
Bordered table
Add .table-borderedfor borders on all sides of the table and cells. For Inverse Dark Table,add .table-darkalong with .table-bordered.
Borderless Table
Add .table-borderlessfor a table without borders. It can also be used on dark tables.
Hoverable rows
Add .table-hoverto enable a hover state on table rows within a <tbody>.
Contextual classes
Use contextual classes to color table rows or individual cells. Read full documnetation here.
Always responsive
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsiveclass on .table. Or,pick a maximum breakpoint with which to have a responsive table up to by adding .table-responsive{-sm|-md|-lg|-xl}. Read full documnetation here.
Vertical clipping/truncation
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.
| # | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 | Heading 11 | Heading 12 | Heading 13 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Michael Right | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| Michael Right | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| Michael Right | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |