Using the most basic table Leanne Grahamup, 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.
You can also invert the colors—with light text on dark backgrounds—with .table-dark
class with .table
class.
Similar to tables and dark tables, use the modifier classes .table-dark
to make thead appear dark.
User | Project Name | Users | Status | Aection |
---|---|---|---|---|
Smit Gani
|
Skot admin | Active | ||
Parul Patel
|
Ruby admin | Pending | ||
Mitesh Tank
|
Dev admin | Completed | ||
Jully Desai
|
Master admin | Pending | ||
Paresh Rani
|
Robot admin | Cancel |
.table-light
to make thead appear light.Use .table-striped
to add zebra-striping to any table row within the . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
Add .table-bordered
for borders on all sides of the table and cells. For Inverse Dark Table, add .table-dark
along with .table-bordered.
Add .table-borderless
for a table without borders. It can also be used on dark tables.
Add .table-hover
to enable a hover state on table rows.
Add .table-sm
class with .table to display small size table.
Use contextual
classes to color table rows or individual cells.
# | 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 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | 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 |
1 | 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 |
1 | 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 |
1 | 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 |