package: '@thumbtack/tp-ui-element-table' kit: table/index.mdx platform: scss url: /components/table/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-element-table';

Table options

Default

<table class="tp-table">
    <thead>
        <tr>
            <th>Professional</th>
            <th class="tp-text--right">Numbers</th>
            <th class="tp-cell-collapse">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Professional name one</td>
            <td class="tp-text--right">258</td>
            <td>Up</td>
        </tr>
        <tr>
            <td>Professional name two that runs longer</td>
            <td class="tp-text--right">19</td>
            <td>Down</td>
        </tr>
    </tbody>
</table>

Rules

<table class="tp-table tp-table--rule">
    <thead>
        <tr>
            <th>Quote</th>
            <th class="tp-text--right">Numbers</th>
            <th class="tp-cell-collapse">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Quote title one</td>
            <td class="tp-text--right">258</td>
            <td>Up</td>
        </tr>
        <tr>
            <td>Quote title two that runs longer</td>
            <td class="tp-text--right">19</td>
            <td>Down</td>
        </tr>
        <tr>
            <td>Quote title three</td>
            <td class="tp-text--right">400</td>
            <td>Up</td>
        </tr>
    </tbody>
</table>

Bottom border

<table class="tp-table tp-table--rule-bottom">
    <thead>
        <tr>
            <th>Quote</th>
            <th class="tp-text--right">Numbers</th>
            <th class="tp-cell-collapse">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Quote title one</td>
            <td class="tp-text--right">258</td>
            <td>Up</td>
        </tr>
        <tr>
            <td>Quote title two that runs longer</td>
            <td class="tp-text--right">19</td>
            <td>Down</td>
        </tr>
        <tr>
            <td>Quote title three</td>
            <td class="tp-text--right">400</td>
            <td>Up</td>
        </tr>
    </tbody>
</table>