- Dashboards4
- Apps
- UI Elements22
- Forms
- Tables
- Extra
Home
Apps
UI
Forms
Tables
Extra
basic-table
Project Listing
Overview of the projects
Team Lead | Project | Status | Weeks | Budget |
---|---|---|---|---|
Hanna Goverhgover@gmail.com | Flexy React | 35 | 95K | |
Jonathan Goverhgover@gmail.com | Lading pro React | 35 | 95K | |
Steavehgover@gmail.com | Elite React | 35 | 95K | |
Mukesh chavahgover@gmail.com | Flexy React | 35 | 95K | |
Thuklk luuhgover@gmail.com | Ample React | 35 | 95K |
Default Table
Using the most basic table markup, here’s how Table
-based tables look in Reactstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table Header
Similar to tables, use the modifier classes .thead-light to make<thead>
s appear light.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Striped rows
Use striped
to add zebra-striping to any table row within the <tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Bordered Table
Use bordered
to add zebra-striping to any table row within the<tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Hoverable Rows
Use hover
to add zebra-striping to any table row within the <tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Responsive Table
Use responsive
to add zebra-striping to any table row within the <tbody>
.
# | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell |