| 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 |
Basic
HTML
<div class="pa4">
<div class="overflow-auto">
<table class="f6 w-100 mw8 center" cellspacing="0">
<thead>
<tr>
<th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Name</th>
<th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Username</th>
<th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Email</th>
<th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">ID</th>
</tr>
</thead>
<tbody class="lh-copy">
<tr>
<td class="pv3 pr3 bb b--black-20">Hassan Johnson</td>
<td class="pv3 pr3 bb b--black-20">@hassan</td>
<td class="pv3 pr3 bb b--black-20">[email protected]</td>
<td class="pv3 pr3 bb b--black-20">14419232532474</td>
</tr>
<tr>
<td class="pv3 pr3 bb b--black-20">Taral Hicks</td>
<td class="pv3 pr3 bb b--black-20">@hicks</td>
<td class="pv3 pr3 bb b--black-20">[email protected]</td>
<td class="pv3 pr3 bb b--black-20">72326219423551</td>
</tr>
<tr>
<td class="pv3 pr3 bb b--black-20">Tyrin Turner</td>
<td class="pv3 pr3 bb b--black-20">@tt</td>
<td class="pv3 pr3 bb b--black-20">[email protected]</td>
<td class="pv3 pr3 bb b--black-20">92325170324444</td>
</tr>
<tr>
<td class="pv3 pr3 bb b--black-20">Oliver Grant</td>
<td class="pv3 pr3 bb b--black-20">@oli</td>
<td class="pv3 pr3 bb b--black-20">[email protected]</td>
<td class="pv3 pr3 bb b--black-20">71165170352909</td>
</tr>
<tr>
<td class="pv3 pr3 bb b--black-20">Dean Blanc</td>
<td class="pv3 pr3 bb b--black-20">@deanblanc</td>
<td class="pv3 pr3 bb b--black-20">[email protected]</td>
<td class="pv3 pr3 bb b--black-20">71865178111909</td>
</tr>
</tbody>
</table>
</div>
</div>
css
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.b--black-20 {
border-color: rgba(0, 0, 0, .2);
}
.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;
}
.pa4 {
padding: 2rem;
}
.pr3 {
padding-right: 1rem;
}
.pb3 {
padding-bottom: 1rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.tl {
text-align: left;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
Css stats for this component
- Gzipped Size
- 294B
- Selectors
- 15
- Declarations
- 18
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-borders tachyons-border-colors tachyons-font-weight tachyons-line-height tachyons-max-widths tachyons-widths tachyons-overflow tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale tachyons-utilities