DS in CSS
Table
Use the semantic <table>, <thead>, <tbody>,
<tr>, <th>, and
<td> elements for DS tables.
On the <table> element, apply the class .cb-table.
On the <thead> element, apply the class .cb-thead.
On the <tr> element, apply the class .cb-tr.
On the <th> element, apply the class .cb-th.
On the <td> element, apply the class .cb-td.
| Name | SSN | Status |
|---|---|---|
| Clancy Wiggum | •••••1234 |
Active
|
| Charles M. Burns | •••••0001 |
Pending
|
| Arman Tanzarian | •••••5555 |
Disabled
|
| Seymour Skinner | •••••5555 |
Active
|
Table with fixed columns and zebra
You can also add .cb-fixed to the <table> element for a table fixed-width columns, and add .cb-zebra for zebra striping (i.e., alternating row background color).
Here's the same table from above, with those two classes added to the <table> element:
| Name | SSN | Status |
|---|---|---|
| Clancy Wiggum | •••••1234 |
Active
|
| Charles M. Burns | •••••0001 |
Pending
|
| Arman Tanzarian | •••••5555 |
Disabled
|
| Seymour Skinner | •••••5555 |
Active
|
Cell alignment
The table below contains some <th> and <td> elements that are formatted for displaying numbers.
Add .cb-text-align-right to a <th> or <td> to
align is content to the right.
Add .cb-number to a <th> or <td> to
align is content to the right and format numbers to display in a tabular variant.
Here, the Age and Number of pets columns are both formatted for numeric data.
| Name | Age | Number of pets | Pet type(s) |
|---|---|---|---|
| Clancy Wiggum | 43 | 1 | Cat |
| Eleanor Abernathy | 80 | 5,345 | Cat |
| Homer Simpson | 40 | 2 | Cat, Dog |