Table
| Class name | Type | Description |
|---|---|---|
tc-table | Component | Table |
tc-table-row | Utility | Bordered rows |
tc-table-border | Utility | Bordered cells |
tc-table-zebra | Utility | Background color on every other row |
tc-table-hover | Utility | Background color on hover |
Examples
tc-table
| Name | Gender | Age |
|---|---|---|
| Bob | Male | 30 |
| Mary | Female | 35 |
| Joe | Male | 40 |
tc-table-row
| Name | Gender | Age |
|---|---|---|
| Bob | Male | 30 |
| Mary | Female | 35 |
| Joe | Male | 40 |
tc-table-border
| Name | Gender | Age |
|---|---|---|
| Bob | Male | 30 |
| Mary | Female | 35 |
| Joe | Male | 40 |
tc-table-zebra
| Name | Gender | Age |
|---|---|---|
| Bob | Male | 30 |
| Mary | Female | 35 |
| Joe | Male | 40 |
tc-table-hover
| Name | Gender | Age |
|---|---|---|
| Bob | Male | 30 |
| Mary | Female | 35 |
| Joe | Male | 40 |
Responsive table
| # | Heading A | Heading B | Heading C | Heading D | Heading E | Heading F | Heading G | Heading H | Heading I | Heading J | Heading K | Heading L | Heading M |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell A1 | Cell B1 | Cell C1 | Cell D1 | Cell E1 | Cell F1 | Cell G1 | Cell H1 | Cell I1 | Cell J1 | Cell K1 | Cell L1 | Cell M1 |
| 2 | Cell A2 | Cell B2 | Cell C2 | Cell D2 | Cell E2 | Cell F2 | Cell G2 | Cell H2 | Cell I2 | Cell J2 | Cell K2 | Cell L2 | Cell M2 |
| 3 | Cell A3 | Cell B3 | Cell C3 | Cell D3 | Cell E3 | Cell F3 | Cell G3 | Cell H3 | Cell I3 | Cell J3 | Cell K3 | Cell L3 | Cell M3 |
<h3 class="tu-typo-apply">tc-table</h3>
<table class="tc-table mb-6 w-full overflow-x-auto">
<thead>
<tr class="text-left">
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Male</td>
<td>30</td>
</tr>
<tr>
<td>Mary</td>
<td>Female</td>
<td>35</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>40</td>
</tr>
</tbody>
</table>
<h3 class="tu-typo-apply">tc-table-row</h3>
<table class="tc-table tc-table-row mb-6 w-full overflow-x-auto">
<thead>
<tr class="text-left">
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Male</td>
<td>30</td>
</tr>
<tr>
<td>Mary</td>
<td>Female</td>
<td>35</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>40</td>
</tr>
</tbody>
</table>
<h3 class="tu-typo-apply">tc-table-border</h3>
<table class="tc-table tc-table-border mb-6 w-full overflow-x-auto">
<thead>
<tr class="text-left">
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Male</td>
<td>30</td>
</tr>
<tr>
<td>Mary</td>
<td>Female</td>
<td>35</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>40</td>
</tr>
</tbody>
</table>
<h3 class="tu-typo-apply">tc-table-zebra</h3>
<table class="tc-table tc-table-border tc-table-zebra mb-6 w-full overflow-x-auto">
<thead>
<tr class="text-left">
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Male</td>
<td>30</td>
</tr>
<tr>
<td>Mary</td>
<td>Female</td>
<td>35</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>40</td>
</tr>
</tbody>
</table>
<h3 class="tu-typo-apply">tc-table-hover</h3>
<table class="tc-table tc-table-border tc-table-hover mb-6 w-full overflow-x-auto">
<thead>
<tr class="text-left">
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Male</td>
<td>30</td>
</tr>
<tr>
<td>Mary</td>
<td>Female</td>
<td>35</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>40</td>
</tr>
</tbody>
</table>
<h3 class="tu-typo-apply">Responsive table</h3>
<div class="w-2/4 overflow-x-auto">
<table class="tc-table tc-table-border w-full">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading A</th>
<th scope="col">Heading B</th>
<th scope="col">Heading C</th>
<th scope="col">Heading D</th>
<th scope="col">Heading E</th>
<th scope="col">Heading F</th>
<th scope="col">Heading G</th>
<th scope="col">Heading H</th>
<th scope="col">Heading I</th>
<th scope="col">Heading J</th>
<th scope="col">Heading K</th>
<th scope="col">Heading L</th>
<th scope="col">Heading M</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell A1</td>
<td>Cell B1</td>
<td>Cell C1</td>
<td>Cell D1</td>
<td>Cell E1</td>
<td>Cell F1</td>
<td>Cell G1</td>
<td>Cell H1</td>
<td>Cell I1</td>
<td>Cell J1</td>
<td>Cell K1</td>
<td>Cell L1</td>
<td>Cell M1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell A2</td>
<td>Cell B2</td>
<td>Cell C2</td>
<td>Cell D2</td>
<td>Cell E2</td>
<td>Cell F2</td>
<td>Cell G2</td>
<td>Cell H2</td>
<td>Cell I2</td>
<td>Cell J2</td>
<td>Cell K2</td>
<td>Cell L2</td>
<td>Cell M2</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell A3</td>
<td>Cell B3</td>
<td>Cell C3</td>
<td>Cell D3</td>
<td>Cell E3</td>
<td>Cell F3</td>
<td>Cell G3</td>
<td>Cell H3</td>
<td>Cell I3</td>
<td>Cell J3</td>
<td>Cell K3</td>
<td>Cell L3</td>
<td>Cell M3</td>
</tr>
</tbody>
</table>
</div>