Tables

Apply simple and clean styles to tables by using the pam-Table attribute. There are a number of basic modifiers that can be used such as striped, bordered and fluid.

Default styling
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
horizontal
Creates a row focused table.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
bordered
Applies inner borders to table.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
striped
Exactly as it sounds, a striped table.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
borderless
Remove all borders.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
center
Horizontally center all cells.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
fluid
Adjusts width relative to parent element.
Hello, I'm caption
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<table pam-Table="[modifier]">
    <caption>Hello, I'm caption</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>Title</th>
            <th>Rating</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Swordfish</td>
            <td>10</td>
            <td>2001</td>
        </tr>
        <tr>
            <td>2</td>
            <td>WarGames</td>
            <td>9.0</td>
            <td>1983</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Sneakers</td>
            <td>8.9</td>
            <td>1992</td>
        </tr>
    </tbody>
</table>

Hover

Apply hover to the a table by using the hover modifier.

Hello, I'm a hover table
# Title Rating Year
1 Swordfish 10 2001
2 WarGames 9.0 1983
3 Sneakers 8.9 1992
Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<table pam-Table="hover">
    <caption>Hello, I'm a hover table</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>Title</th>
            <th>Rating</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Swordfish</td>
            <td>10</td>
            <td>2001</td>
        </tr>
        <tr>
            <td>2</td>
            <td>WarGames</td>
            <td>9.0</td>
            <td>1983</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Sneakers</td>
            <td>8.9</td>
            <td>1992</td>
        </tr>
    </tbody>
</table>

Hooks

.hook-table .hook-table-caption .hook-table-caption-bp-medium .hook-table-odd-td .hook-table-td .hook-table-th .hook-table-td-th .hook-table-td-th-bp-medium .hook-table-td-th-first-child .hook-table-thead .hook-table-bordered .hook-table-bordered-tbody-tr-last-child .hook-table-borderless .hook-table-center .hook-table-fluid .hook-table-horizontal-tbody-tr-last-child .hook-table-horizontal-td-th .hook-table-striped

Variables

These are all the component specific variables that can be used for customization.

Name Value
@table-border-color rgba(0, 0, 0, 0.12)
@table-border-style solid
@table-border-width 1px
@table-color @skin-text-primary-on-light
@table-font-size 0.875rem
@table-font-weight @font-weight-normal
@table-hover-bg-color rgba(0, 0, 0, 0.04)
@table-letter-spacing 0.018em
@table-line-height 1.25rem
@table-padding-bp-medium @space-16
@table-padding @space-8
@table-head-bg-color @skin-background
@table-head-border-bottom @table-border-width @table-border-style @table-border-color
@table-th-font-weight @font-weight-medium
@table-striped-odd-bg-color @skin-gray-200
@table-border-bordered-color @table-border-color
@table-border-bordered-style solid
@table-border-bordered-width 1px
@table-border-horizontal-color @table-border-color
@table-border-horizontal-style solid
@table-border-horizontal-width 1px