The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. Table is an ubiquitous feature of most user interfaces, regardless of a site's content or function. It's design and use is therefore an important factor in the overall user experience.
Bootstrap provides table with its own custom table styles. This simple table can be also converted to table with striped rows, bordered table, table with hover rows, condensed table, table with contextual classes, responsive table, breakpoint-specific responsive table and a table with highlighted header.
Name | Code | State/City | End Date of Work | Status | Timesheet |
---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet |
The Propeller Table is an enhanced version of the Bootstrap standard HTML <
table
>
. Include .pmd-table
followed by .table
to use Propeller table.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
To highlight the table heading, use .thead-dark
and .thead-light
class.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Add <caption>
above the <thead>
to describe what the table is all about.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Card Table reformats each row into a card for narrow screens. This way user can view complete information without horizontal scroll. Add .pmd-table-card
to convert simple table into Card Table.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Nested Table is a table inside a table. It can have several rows for each row of its parent table. Add .child-table
to the tr
where you want to nest your table. Then add colspan to the td
followed by above tr
with the value equal to the number of columns in sub-table. Add .table-sm
followed by .table
in nested table tag to make it look like sub-table.
Name | Code | State/City | End Date of Work | Status | Timesheet | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |||||||||||||||||||
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |||||||||||||||||||
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |||||||||||||||||||
|
|||||||||||||||||||||||||
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | ||||||||||||||||||||
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |||||||||||||||||||
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Striped Rows Table by adding .table-striped
in your code. To create an inverse stripped table, use .table-dark
class along with .table-stripped
class.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Bordered Table by adding .table-bordered
in your code. To create an inverse bordered table, use .table-dark
class along with .table-bordered
class.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Borderless Table by adding .table-borderless
in your code.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Hoverable Rows Table by adding .table-hover
in your code. To create an inverse hoverable rows table, use .table-dark
class along with .table-hover
class.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Small Table by adding .table-sm
in your code.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
To create Contextual Table add the class on row namely .table-active
for active, .table-success
for success, .table-info
for info, .table-warning
for warning, and .table-danger
for danger. To create an inverse contextual table, use class .table-dark
along with .pmd-table
class.
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
Create Inverse Table by adding .table-dark
in your code.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Reflow Table by adding .table-reflow
in your code.
Name | Code | State/City | Incharge Name | Mobile | Type of Work | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert |
You can create table with expand and collapse feature by adding class .child-table-expand
to the expand icon and wrapping the child table with a <div>
having class .direct-child-table
.
Ticket No. | Browser Name | Month | Total | Status | Last Updated On | Actions | |||||
---|---|---|---|---|---|---|---|---|---|---|---|
PMD484150 | Firefox | September | 25% | Average | 2016-09-20 15:50:00 | edit delete | |||||
PMD484149 | Google Chrome | September | 32% | High | 2016-09-21 15:50:00 | edit delete | |||||
PMD484148 | Safari | September | 13% | Low | 2016-09-20 14:00:00 | edit delete | |||||
PMD484147 | Opera | September | 7% | Low | 2016-09-20 11:30:00 | edit delete add_circle_outline | |||||
PMD484146 | Mobile & Tablet | September | 4% | Very Low | 2016-07-21 17:40:00 | edit delete |
To create a table with fixed header, wrap the table with a <div>
with class .scrollable-table
. And then wrap that <div>
with another div having class .table-fixed-head
. To trigger the header as fixed, add .header
to the <thead>
.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Create Responsive Table by using the .table-responsive
class.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
To create Breakpoint Specific Responsive Table, use the .table-responsive-{sm|md|ld|xl}
class. For example, to create a table will remain responsive only till tablet view, use .table-responsive-md
class.
Name | Code | State/City | End Date of Work | Status | Timesheet | |
---|---|---|---|---|---|---|
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | Melbourne | 1 June 2014 | Active | Timesheet | more_vert | |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert |
The Propeller CSS classes apply various predefined visual enhancements to the Table. The table lists the available classes and their effects.
Propeller Classes | Effect | Remark |
---|---|---|
.pmd-table |
Class for Propeller Table | Required |
.pmd-card-table |
Wrapper class for card layout. | Optional |
.child-table |
Add this class to create a nested table | Optional |
.child-table-expand |
Add this class to the icon onclicking which the nested/child table will expand. | Optional |
.direct-child-table |
Add this class to the child table to expand it on clicking the icon | Optional |
.table-fixed-head |
Add this class to make the table with fixed header | Optional |
.scrollable-table |
Add this class to make the table scrollable when the header is fixed. | Optional |
.header |
Add this class to trigger the header as fixed on scroll. | Optional |