<table>
|
Standard HTML tag, accepts <thead> and <tbody> as content |
<thead>
|
Standard HTML tag, accepts a single <tr> as content |
<tbody>
|
Standard HTML tag, accepts <tr> elements as content |
<tr>
|
Standard HTML tag, accepts <td> and <th> as content |
<td>
|
Standard HTML tag, accepts content and renders as table cells. |
<th>
|
Standard HTML tag, accepts content and renders as table row or column header cells. |
`.card-table` class
The most common table style is the .card-table, which is used for most data with some interaction.
Each row is encapsulated in a bordered box with a background color.
| Name |
Description |
|
| Apple |
A common tree fruit grown in mild climates |
|
| Orange |
A citrus fruit grown in warm climates |
|
| Kiwi |
Look it up |
|
Rows can be collapsed with their previous row using the row-collapse class.
<tr class="row-collapse">. In the example below we use it to expand a table row with further
detail about the apples row.
| Name |
Description |
| Apple |
A common tree fruit grown in mild climates |
| Name |
Availability |
| HoneyCrisp |
September to April |
| Fuji |
Year Round |
| Ambrosia |
September to February |
| Cripps Pink |
November to August |
|
| Orange |
A citrus fruit grown in warm climates. |
The white table cell above uses the bg-white class to set the background color to white:
<td class="bg-white">
`.borderless` class
The .borderless class styles the first column like a header label. It should be used for simple
vertical tabular data (like a statement) with two columns that doesn't need a head row
| Gross |
$2100 |
| Export |
-- |
| Total |
$2100 |
`.table-container` container class
The default table style should be used for any table within a container. To style the container itself, the
.table-container class should be used to provide a border and appropriate padding.
| Name |
Quantity |
Price |
| Apple |
3 |
$1 |
| Orange |
2 |
$3 |
| Kiwi |
4 |
$2 |
