Tables
Basic
Use .c-table to style a basic style. You are required to use <thead>, <tbody> and <tfoot> elements.
| Name | Status | Gender | Action |
|---|---|---|---|
| Jeremy Smith | Approved | Male | Edit |
| Sharon Kelly | Approved | Female | Edit |
| Maria Burke | Denied | Female | Edit |
| William Schultz | Denied | Male | Edit |
| Prev | Next | ||
table.c-table
thead
tr
th Name
th Status
th Gender
th Action
tbody
tr
td Jeremy Smith
td Approved
td Male
td
a href="#" Edit
tr
td Sharon Kelly
td Approved
td Female
td
a href="#" Edit
tr
td Maria Burke
td Denied
td Female
td
a href="#" Edit
tr
td William Schultz
td Denied
td Male
td
a href="#" Edit
tfoot
tr
td colspan="2"
i.kzicon.kzicon-arrow-left
| Prev
td.u-text-right colspan="2"
| Next
i.kzicon.kzicon-arrow-right
<table class="c-table">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
<tr>
<td>
William Schultz
</td>
<td>
Denied
</td>
<td>
Male
</td>
<td>
<a href="#">Edit</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<i class="kzicon kzicon-arrow-left"></i>Prev
</td>
<td class="u-text-right" colspan="2">
Next<i class="kzicon kzicon-arrow-right"></i>
</td>
</tr>
</tfoot>
</table>Text alignment
Use .u-text-right or .u-text-center utility classes to adjust the text alignment in a table header, row, or cell.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
table.c-table
thead
tr
th Name
th Status
th.u-text-right Gender
tbody
tr
td Jeremy Smith
td Approved
td.u-text-right Male
tr
td Sharon Kelly
td Approved
td.u-text-right Female
tr
td Maria Burke
td Denied
td.u-text-right Female
<table class="c-table">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th class="u-text-right">
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td class="u-text-right">
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td class="u-text-right">
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td class="u-text-right">
Female
</td>
</tr>
</tbody>
</table>Celled
Use .c-table--celled to add borders to any cell.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
| 3 people | 2 approved |
table.c-table--celled
thead
tr
th Name
th Status
th Gender
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
tfoot
tr
td 3 people
td 2 approved
td
<table class="c-table--celled">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
3 people
</td>
<td>
2 approved
</td>
<td></td>
</tr>
</tfoot>
</table>Minimal
Use .c-table--minimal to make a minimal style table.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
| 3 people | 2 approved |
table.c-table--minimal
thead
tr
th Name
th Status
th Gender
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
tfoot
tr
td 3 people
td 2 approved
td
<table class="c-table--minimal">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
3 people
</td>
<td>
2 approved
</td>
<td></td>
</tr>
</tfoot>
</table>Looks good only with <tbody>.
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
table.c-table--minimal
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
<table class="c-table--minimal">
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
</tbody>
</table>Striped
Use .-bg-striped to add zebra-striping to any table row within the <tbody>.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
| William Schultz | Denied | Male |
table.c-table.-bg-striped
thead
tr
th Name
th Status
th Gender
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
tr
td William Schultz
td Denied
td Male
<table class="c-table -bg-striped">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
William Schultz
</td>
<td>
Denied
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>Auto width
Use .-width-auto to collapse spaces.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
| 3 people | 2 approved |
table.c-table.-width-auto
thead
tr
th Name
th Status
th Gender
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
tfoot
tr
td 3 people
td 2 approved
td
<table class="c-table -width-auto">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
3 people
</td>
<td>
2 approved
</td>
<td></td>
</tr>
</tfoot>
</table>More Padding
Add .-padding-more if you need a table to be more padded.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
| 3 people | 2 approved |
table.c-table.-padding-more
thead
tr
th Name
th Status
th Gender
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
tfoot
tr
td 3 people
td 2 approved
td
<table class="c-table -padding-more">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
3 people
</td>
<td>
2 approved
</td>
<td></td>
</tr>
</tfoot>
</table>Less padding
Add .-padding-less if you need a table to be more compact.
| Name | Status | Gender |
|---|---|---|
| Jeremy Smith | Approved | Male |
| Sharon Kelly | Approved | Female |
| Maria Burke | Denied | Female |
| 3 people | 2 approved |
table.c-table.-padding-less
thead
tr
th Name
th Status
th Gender
tbody
tr
td Jeremy Smith
td Approved
td Male
tr
td Sharon Kelly
td Approved
td Female
tr
td Maria Burke
td Denied
td Female
tfoot
tr
td 3 people
td 2 approved
td
<table class="c-table -padding-less">
<thead>
<tr>
<th>
Name
</th>
<th>
Status
</th>
<th>
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Approved
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Approved
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
Denied
</td>
<td>
Female
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
3 people
</td>
<td>
2 approved
</td>
<td></td>
</tr>
</tfoot>
</table>Nested
Tables are nestable.
| Name | Plan | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Jeremy Smith | Free plan | ||||||||
| Sharon Kelly | Free plan | ||||||||
| Maria Burke |
Enterpise plan
|
table.c-table--celled
thead
tr
th Name
th Plan
tbody
tr
td Jeremy Smith
td Free plan
tr
td Sharon Kelly
td Free plan
tr
td Maria Burke
td
p Enterpise plan
table.c-table--compact.c-table--minimal
thead
tr
th Description
th Amount
tbody
tr
td Basic charge
td $120.00
tr
td Tax
td $3.00
tfoot
tr
th Total
td $123.00
<table class="c-table--celled">
<thead>
<tr>
<th>
Name
</th>
<th>
Plan
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
Free plan
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
Free plan
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
<p>
Enterpise plan
</p>
<table class="c-table--compact c-table--minimal">
<thead>
<tr>
<th>
Description
</th>
<th>
Amount
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Basic charge
</td>
<td>
$120.00
</td>
</tr>
<tr>
<td>
Tax
</td>
<td>
$3.00
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Total
</th>
<td>
$123.00
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>Control row width
Use.u-nowrap helpers to avoid line break.
| Name | Status | Gender | profile |
|---|---|---|---|
| Jeremy Smith | Approved | Male | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| Sharon Kelly | Approved | Female | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| Maria Burke | Denied | Female | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| 3 people | 2 approved |
table.c-table--celled
thead
tr
th.u-nowrap Name
th.u-nowrap Status
th.u-nowrap Gender
th profile
tbody
tr
td.u-nowrap Jeremy Smith
td.u-nowrap Approved
td.u-nowrap Male
td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
tr
td.u-nowrap Sharon Kelly
td.u-nowrap Approved
td.u-nowrap Female
td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
tr
td.u-nowrap Maria Burke
td.u-nowrap Denied
td.u-nowrap Female
td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
tfoot
tr
td.u-nowrap 3 people
td.u-nowrap 2 approved
td
td
<table class="c-table--celled">
<thead>
<tr>
<th class="u-nowrap">
Name
</th>
<th class="u-nowrap">
Status
</th>
<th class="u-nowrap">
Gender
</th>
<th>
profile
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-nowrap">
Jeremy Smith
</td>
<td class="u-nowrap">
Approved
</td>
<td class="u-nowrap">
Male
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td class="u-nowrap">
Sharon Kelly
</td>
<td class="u-nowrap">
Approved
</td>
<td class="u-nowrap">
Female
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td class="u-nowrap">
Maria Burke
</td>
<td class="u-nowrap">
Denied
</td>
<td class="u-nowrap">
Female
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="u-nowrap">
3 people
</td>
<td class="u-nowrap">
2 approved
</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>Table Sorter
Add .c-table-sorter to th element if you need a table sort feature.
| Name | Test ID | Gender |
|---|---|---|
| Jeremy Smith | 001 | Male |
| Sharon Kelly | 002 | Female |
| Maria Burke | 003 | Female |
table.c-table--celled
thead
tr
th.c-table-sorter Name
th.c-table-sorter.-ascending Test ID
th.c-table-sorter.-descending Gender
tbody
tr
td Jeremy Smith
td 001
td Male
tr
td Sharon Kelly
td 002
td Female
tr
td Maria Burke
td 003
td Female
<table class="c-table--celled">
<thead>
<tr>
<th class="c-table-sorter">
Name
</th>
<th class="c-table-sorter -ascending">
Test ID
</th>
<th class="c-table-sorter -descending">
Gender
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
001
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Sharon Kelly
</td>
<td>
002
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Maria Burke
</td>
<td>
003
</td>
<td>
Female
</td>
</tr>
</tbody>
</table>Inactive Cell
Add .-is-inactive to tr element to indicate the row is inactive.
| Name | Test ID | Acitve |
|---|---|---|
| Jeremy Smith | 001 | Active |
| Sharon Kelly | 002 | Inactive |
| Maria Burke | 003 | Inactive |
table.c-table--celled
thead
tr
th Name
th Test ID
th Acitve
tbody
tr
td Jeremy Smith
td 001
td Active
tr.-is-inactive
td Sharon Kelly
td 002
td Inactive
tr.-is-inactive
td Maria Burke
td 003
td Inactive
<table class="c-table--celled">
<thead>
<tr>
<th>
Name
</th>
<th>
Test ID
</th>
<th>
Acitve
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jeremy Smith
</td>
<td>
001
</td>
<td>
Active
</td>
</tr>
<tr class="-is-inactive">
<td>
Sharon Kelly
</td>
<td>
002
</td>
<td>
Inactive
</td>
</tr>
<tr class="-is-inactive">
<td>
Maria Burke
</td>
<td>
003
</td>
<td>
Inactive
</td>
</tr>
</tbody>
</table>