Navigation
Theme components
Form components
Apps
Other
Documentation
Contextual classes
Add the .table-{color}
class to the <tr>
element for coloured table rows.
Name | Country | Company |
---|---|---|
Lucas smith | Australia | Apple, Inc. |
Janet Abshire | USA | |
Lucas Koch | England | |
Gladys Schuster | USA | Coursera |
George Clinton | Canada | |
Jennifer Weber | New Zealand | Lyft |
Table head colors
Use the .table
class for default table styling.
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Table hover using primary color
Use the .table-hover
with the .table-hover-primary
class to add hover functionality using the primary color
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Table hover using secondary color
Use the .table-hover
with the .table-hover-secondary
class to add hover functionality using the secondary color
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Table hover using info color
Use the .table-hover
with the .table-hover-info
class to add hover functionality using the info color
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Table hover using success color
Use the .table-hover
with the .table-hover-success
class to add hover functionality using the success color
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Table hover using warning color
Use the .table-hover
with the .table-hover-warning
class to add hover functionality using the warning color
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |
Table hover using danger color
Use the .table-hover
with the .table-hover-danger
class to add hover functionality using the danger color
Name | Ticker | Price |
---|---|---|
Apple Inc. | AAPL | 115.52 |
Google Inc. | GOOG | 635.30 |
Microsoft Corporation | MSFT | 46.74 |
LinkedIn Corp | LNKD | 190.04 |