| Name | Username | ID | |
|---|---|---|---|
| Hassan Johnson | @hassan | [email protected] | 14419232532474 |
| Taral Hicks | @hicks | [email protected] | 72326219423551 |
| Tyrin Turner | @tt | [email protected] | 92325170324444 |
| Oliver Grant | @oli | [email protected] | 71165170352909 |
| Dean Blanc | @deanblanc | [email protected] | 71865178111909 |
Striped Dark
HTML
<div class="pa4">
<div class="overflow-auto">
<table class="f6 w-100 mw8 center" cellspacing="0">
<thead>
<tr class="stripe-dark">
<th class="fw6 tl pa3 bg-white">Name</th>
<th class="fw6 tl pa3 bg-white">Username</th>
<th class="fw6 tl pa3 bg-white">Email</th>
<th class="fw6 tl pa3 bg-white">ID</th>
</tr>
</thead>
<tbody class="lh-copy">
<tr class="stripe-dark">
<td class="pa3">Hassan Johnson</td>
<td class="pa3">@hassan</td>
<td class="pa3">[email protected]</td>
<td class="pa3">14419232532474</td>
</tr>
<tr class="stripe-dark">
<td class="pa3">Taral Hicks</td>
<td class="pa3">@hicks</td>
<td class="pa3">[email protected]</td>
<td class="pa3">72326219423551</td>
</tr>
<tr class="stripe-dark">
<td class="pa3">Tyrin Turner</td>
<td class="pa3">@tt</td>
<td class="pa3">[email protected]</td>
<td class="pa3">92325170324444</td>
</tr>
<tr class="stripe-dark">
<td class="pa3">Oliver Grant</td>
<td class="pa3">@oli</td>
<td class="pa3">[email protected]</td>
<td class="pa3">71165170352909</td>
</tr>
<tr class="stripe-dark">
<td class="pa3">Dean Blanc</td>
<td class="pa3">@deanblanc</td>
<td class="pa3">[email protected]</td>
<td class="pa3">71865178111909</td>
</tr>
</tbody>
</table>
</div>
</div>
css
.fw6 {
font-weight: 600;
}
.lh-copy {
line-height: 1.5;
}
.mw8 {
max-width: 64rem;
}
.w-100 {
width: 100%;
}
.overflow-auto {
overflow: auto;
}
.bg-white {
background-color: #fff;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.stripe-dark:nth-child(odd) {
background-color: rgba(0, 0, 0, .1);
}
.tl {
text-align: left;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
Css stats for this component
- Gzipped Size
- 258B
- Selectors
- 12
- Declarations
- 13
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-font-weight tachyons-line-height tachyons-max-widths tachyons-widths tachyons-overflow tachyons-skins tachyons-spacing tachyons-tables tachyons-text-align tachyons-type-scale tachyons-utilities