There's a new version of UIDS!

UIDS - UI Design System

Tables

Tables

Component Preview 
<div class="container">
    <table>
        <caption>This is a default table.</caption>
        <thead>
            <tr>
                <th>Person</th>
                <th>Number</th>
                <th>Third Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Someone Lastname</th>
                <td>900</td>
                <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Person Name</a>
                </th>
                <td>1200</td>
                <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                    nulla non metus auctor fringilla.</td>
            </tr>
            <tr>
                <th>Another Person</th>
                <td>1500</td>
                <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                    auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
            </tr>
            <tr>
                <th>Last One</th>
                <td>2800</td>
                <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                    mattis consectetur purus sit amet fermentum.</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--gray-borders table--width-default">
        <caption>Tables can have captions now.</caption>
        <thead>
            <tr>
                <th>Person</th>
                <th>Number</th>
                <th>Third Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Someone Lastname</th>
                <td>900</td>
                <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Person Name</a>
                </th>
                <td>1200</td>
                <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                    nulla non metus auctor fringilla.</td>
            </tr>
            <tr>
                <th>Another Person</th>
                <td>1500</td>
                <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                    auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
            </tr>
            <tr>
                <th>Last One</th>
                <td>2800</td>
                <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                    mattis consectetur purus sit amet fermentum.</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--gray-borders">
        <caption class="element-invisible">Tables can have captions now.</caption>
        <thead>
            <tr>
                <th>Person</th>
                <th>Number</th>
                <th>Third Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Someone Lastname</th>
                <td>900</td>
                <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Person Name</a>
                </th>
                <td>1200</td>
                <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                    nulla non metus auctor fringilla.</td>
            </tr>
            <tr>
                <th>Another Person</th>
                <td>1500</td>
                <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                    auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
            </tr>
            <tr>
                <th>Last One</th>
                <td>2800</td>
                <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                    mattis consectetur purus sit amet fermentum.</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--width-default" summary="Undergraduate Cost of Attendence - Living on Campus Example Table">
        <caption><strong>Living On Campus - Example Table</strong></caption>
        <thead>
            <tr>
                <th scope="row">&nbsp;</th>
                <th scope="col">Resident</th>
                <th scope="col">Nonresident</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="3" scope="row">Estimated Charges</th>
            </tr>
            <tr>
                <th scope="row">Tuition &amp; Fees</th>
                <td>$0,000</td>
                <td>$00,000</td>
            </tr>
            <tr>
                <th scope="row">Housing &amp; Meals</th>
                <td>$00,000</td>
                <td>$00,000</td>
            </tr>
            <tr>
                <th scope="row">Subtotal</th>
                <td><strong>$00,000</strong></td>
                <td><strong>$00,000</strong></td>
            </tr>
            <tr>
                <th colspan="3" scope="row">Other Estimated Expenses</th>
            </tr>
            <tr>
                <th scope="row">Books &amp; Supplies</th>
                <td>$000</td>
                <td>$000</td>
            </tr>
            <tr>
                <th scope="row">Personal</th>
                <td>$0,000</td>
                <td>$0,000</td>
            </tr>
            <tr>
                <th scope="row">Transportation</th>
                <td>$000</td>
                <td>$000</td>
            </tr>
            <tr>
                <th scope="row"><strong>Total</strong></th>
                <td><strong>$00,000</strong></td>
                <td><strong>$00,000</strong></td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--gray-borders" summary="Undergraduate Cost of Attendence - Living on Campus Example Table">
        <thead>
            <tr>
                <th scope="row">&nbsp;</th>
                <th scope="col">Resident</th>
                <th scope="col">Nonresident</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="3" scope="row">Estimated Charges</th>
            </tr>
            <tr>
                <th scope="row">Tuition &amp; Fees</th>
                <td>$0,000</td>
                <td>$00,000</td>
            </tr>
            <tr>
                <th scope="row">Housing &amp; Meals</th>
                <td>$00,000</td>
                <td>$00,000</td>
            </tr>
            <tr>
                <th scope="row">Subtotal</th>
                <td><strong>$00,000</strong></td>
                <td><strong>$00,000</strong></td>
            </tr>
            <tr>
                <th colspan="3" scope="row">Other Estimated Expenses</th>
            </tr>
            <tr>
                <th scope="row">Books &amp; Supplies</th>
                <td>$000</td>
                <td>$000</td>
            </tr>
            <tr>
                <th scope="row">Personal</th>
                <td>$0,000</td>
                <td>$0,000</td>
            </tr>
            <tr>
                <th scope="row">Transportation</th>
                <td>$000</td>
                <td>$000</td>
            </tr>
            <tr>
                <th scope="row"><strong>Total</strong></th>
                <td><strong>$00,000</strong></td>
                <td><strong>$00,000</strong></td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table>
        <caption class="element-invisible">Tables can have captions now.</caption>
        <thead>
            <tr>
                <th>Person</th>
                <th>Number</th>
                <th>Third Column</th>
                <th>Fourth Column</th>
                <th>Fifth Column</th>
                <th>Sixth Column</th>
                <th>Seventhth Column</th>
                <th>Eighth Column</th>
                <th>Ninth Column</th>
                <th>Tenth Column</th>
                <th>Eleventh Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Someone Lastname</th>
                <td>900</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Person Name</a>
                </th>
                <td>1200</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Another Person</th>
                <td>1500</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>some other person</th>
                <td>2800</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Someone and a Lastname</th>
                <td>500</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Linked Name</a>
                </th>
                <td>1720</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Another random person</th>
                <td>1200</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Some other Person</th>
                <td>2200</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Firstname and something</th>
                <td>920</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Linked Other Name</a>
                </th>
                <td>1208</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Another Person Randomly selected</th>
                <td>1550</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Last One</th>
                <td>2830</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--width-default table--gray-borders">
        <caption class="element-invisible">This table was given a default width</caption>
        <thead>
            <tr>
                <th>Person</th>
                <th>Number</th>
                <th>Third Column</th>
                <th>Fourth Column</th>
                <th>Fifth Column</th>
                <th>Sixth Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Someone Lastname</th>
                <td>900</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Person Name</a>
                </th>
                <td>1200</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Another Person</th>
                <td>1500</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>some other person</th>
                <td>2800</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Someone and a Lastname</th>
                <td>500</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Linked Name</a>
                </th>
                <td>1720</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Another random person</th>
                <td>1200</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Some other Person</th>
                <td>2200</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Firstname and something</th>
                <td>920</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>
                    <a href="#">Linked Other Name</a>
                </th>
                <td>1208</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Another Person Randomly selected</th>
                <td>1550</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
            <tr>
                <th>Last One</th>
                <td>2830</td>
                <td>9999</td>
                <td>1999</td>
                <td>1999</td>
                <td>1999</td>
            </tr>
        </tbody>
    </table>

    <br /><br />
    <h2>Responsive table</h2>
    <div class="table-responsive">
        <table class="table--hover-highlight table--gray-borders">
            <thead>
                <tr>
                    <th>Person</th>
                    <th>Number</th>
                    <th>Third Column</th>
                    <th>Fourth Column</th>
                    <th>Fifth Column</th>
                    <th>Sixth Column</th>
                    <th>Seventhth Column</th>
                    <th>Eighth Column</th>
                    <th>Ninth Column</th>
                    <th>Tenth Column</th>
                    <th>Eleventh Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Someone Lastname</th>
                    <td>900</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Person Name</a>
                    </th>
                    <td>1200</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Another Person</th>
                    <td>1500</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>some other person</th>
                    <td>2800</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Someone and a Lastname</th>
                    <td>500</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Linked Name</a>
                    </th>
                    <td>1720</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Another random person</th>
                    <td>1200</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Some other Person</th>
                    <td>2200</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Firstname and something</th>
                    <td>920</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Linked Other Name</a>
                    </th>
                    <td>1208</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Another Person Randomly selected</th>
                    <td>1550</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Last One</th>
                    <td>2830</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
            </tbody>
        </table>
    </div>
    <br /><br />

    <br /><br />
    <h2>Responsive table w/ sticky header</h2>
    <div class="table-responsive table-sticky">
        <table class="table--hover-highlight table--gray-borders">
            <thead>
                <tr>
                    <th>Person</th>
                    <th>Number</th>
                    <th>Third Column</th>
                    <th>Fourth Column</th>
                    <th>Fifth Column</th>
                    <th>Sixth Column</th>
                    <th>Seventhth Column</th>
                    <th>Eighth Column</th>
                    <th>Ninth Column</th>
                    <th>Tenth Column</th>
                    <th>Eleventh Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Someone Lastname</th>
                    <td>900</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Person Name</a>
                    </th>
                    <td>1200</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Another Person</th>
                    <td>1500</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>some other person</th>
                    <td>2800</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Someone and a Lastname</th>
                    <td>500</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Linked Name</a>
                    </th>
                    <td>1720</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Another random person</th>
                    <td>1200</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Some other Person</th>
                    <td>2200</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Firstname and something</th>
                    <td>920</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Linked Other Name</a>
                    </th>
                    <td>1208</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Another Person Randomly selected</th>
                    <td>1550</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
                <tr>
                    <th>Last One</th>
                    <td>2830</td>
                    <td>9999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                    <td>1999</td>
                </tr>
            </tbody>
        </table>
    </div>
    <br /><br />

    <br /><br />

    <table>
        <thead>
            <tr>
                <th>Year</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2001</td>
            </tr>
            <tr>
                <td>2002</td>
            </tr>
            <tr>
                <td>2003</td>
            </tr>
            <tr>
                <td>2004</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--gray-borders">
        <thead>
            <tr>
                <th>Year</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2001</td>
            </tr>
            <tr>
                <td>2002</td>
            </tr>
            <tr>
                <td>2003</td>
            </tr>
            <tr>
                <td>2004</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table class="table--gray-borders">
        <tbody>
            <tr>
                <td>Year</td>
            </tr>
            <tr>
                <td>2001</td>
            </tr>
            <tr>
                <td>2002</td>
            </tr>
            <tr>
                <td>2003</td>
            </tr>
            <tr>
                <td>2004</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <h2>Table with default width</h2>
    <table class="table--width-default">
        <caption>This is a default width table.</caption>
        <thead>
            <tr>
                <th>Year</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2001</td>
            </tr>
            <tr>
                <td>2002</td>
            </tr>
            <tr>
                <td>2003</td>
            </tr>
            <tr>
                <td>2004</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <div class="column">
        <h2>Table in a container.</h2>
        <table>
            <caption>This is a default table.</caption>
            <thead>
                <tr>
                    <th>Person</th>
                    <th>Number</th>
                    <th>Third Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Someone Lastname</th>
                    <td>900</td>
                    <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
                </tr>
                <tr>
                    <th>
                        <a href="#">Person Name</a>
                    </th>
                    <td>1200</td>
                    <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                        nulla non metus auctor fringilla.</td>
                </tr>
                <tr>
                    <th>Another Person</th>
                    <td>1500</td>
                    <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                        auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
                </tr>
                <tr>
                    <th>Last One</th>
                    <td>2800</td>
                    <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                        mattis consectetur purus sit amet fermentum.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    @media screen and (min-width: 40em) {
        @media (min-width: 84.375em) {
            .container {
                max-width: 81.875em;
                margin: 0 auto
            }
        }

        .container {
            max-width: 1310px;
        }

        .column {
            width: 450px;
        }
    }
</style>
  • Content: 
    table[border] {
  border-style: solid;
  border-color: #eee; }
  table[border] td,
  table[border] th {
    border-color: #eee; }

table {
  background-color: #fff;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--brand-secondary);
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.15;
  max-width: 100%;
  overflow-x: auto;
  width: 100%; }
  [class*="bg--gray"] table tbody a,
  [class*="bg--white"] table tbody a,
  [class*="bg--black"] table tbody a,
  [class*="bg--gold"] table tbody a,
  .bg-pattern--brain-reversed table tbody a,
  .bg--gold--pattern--brain table tbody a,
  .bg-pattern--brain table tbody a,
  .bg--white--pattern--brain table tbody a,
  .bg--black--pattern--brain table tbody a,
  .bg-pattern--brain-black table tbody a {
    color: #00558C; }
  @media (min-width: 768px) {
    table {
      display: table; } }
  table p, table ul, table ol {
    font-size: 1rem; }
  table ul p, table ol p {
    margin-bottom: 0; }
  table td,
  table th {
    padding: 1.05rem;
    font-size: 1rem; }
  table th {
    color: var(--brand-secondary); }
    table th:not([align]) {
      text-align: left; }
  table thead th {
    background-color: var(--brand-primary);
    border: none;
    text-transform: uppercase; }
    table thead th a {
      color: var(--brand-secondary); }
      [class*="bg--"] table thead th a {
        color: var(--brand-secondary); }
  table tbody th {
    background-color: #fff;
    border: none;
    position: static;
    left: 0;
    padding-left: 1.05rem; }
  table tbody tr:not(.is-selected):nth-child(even),
  table tbody tr:not(.is-selected):nth-child(even) th {
    background-color: #f3f3f3; }
  table.table--hover-highlight tbody tr:not(.is-selected):hover,
  table.table--hover-highlight tbody tr:not(.is-selected):nth-child(even):hover {
    background-color: #fff3c3; }
    table.table--hover-highlight tbody tr:not(.is-selected):hover th,
    table.table--hover-highlight tbody tr:not(.is-selected):nth-child(even):hover th {
      background-color: #fff3c3; }
  table caption {
    width: 100%;
    padding: 1.05rem;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
    background-color: #333;
    font-weight: bold; }
    table caption a,
    table caption :where(p) a:not(.bttn) {
      color: var(--brand-primary); }
      [class*="bg--"] table caption a,
      [class*="bg--"] [class*="bg--"] table caption a, [class*="bg--"]
      table caption :where(p) a:not(.bttn),
      [class*="bg--"] [class*="bg--"]
      table caption :where(p) a:not(.bttn) {
        color: var(--brand-primary); }
  table tbody tr:last-child td,
  table tbody tr:last-child th {
    border-bottom-width: 0; }
  table thead td,
  table thead th {
    color: var(--brand-secondary); }
  table.table--width-default {
    width: unset; }
    table.table--width-default caption {
      width: unset; }

.table-responsive {
  overflow: auto; }
  .table-responsive caption {
    text-align: left; }
    @media (min-width: 768px) {
      .table-responsive caption {
        text-align: center; } }
  .table-responsive.table-sticky {
    height: 80vh; }
    .table-responsive.table-sticky thead {
      position: sticky;
      top: 0;
      border-top: 0; }
    .table-responsive.table-sticky .table--gray-borders thead th {
      position: relative; }
      .table-responsive.table-sticky .table--gray-borders thead th::before {
        content: '';
        position: absolute;
        left: -1px;
        top: 0;
        width: calc(100% + 2px);
        height: calc(100% + 1px);
        border-left: #7c7c7c 1px solid;
        border-bottom: #ddd 1px solid; }
      .table-responsive.table-sticky .table--gray-borders thead th:first-child:before {
        border-left: none; }
  .table-responsive table {
    display: table; }

table.table--gray-borders > tr > td,
table.table--gray-borders > tr > th,
table.table--gray-borders > tbody > tr > td,
table.table--gray-borders > tbody > tr > th,
table.table--gray-borders > tfoot > tr > td,
table.table--gray-borders > tfoot > tr > th {
  border: #ddd 1px solid; }

table.table--gray-borders > thead > tr > td,
table.table--gray-borders > thead > tr > th,
table.table--gray-borders > caption > td,
table.table--gray-borders > caption > th {
  border: #7c7c7c 1px solid; }

table.table--gray-borders > thead > tr > td,
table.table--gray-borders > thead > tr > th {
  border-bottom: #ddd 1px solid;
  border-top: #ddd 1px solid; }
  table.table--gray-borders > thead > tr > td:first-child,
  table.table--gray-borders > thead > tr > th:first-child {
    border-left: #ddd 1px solid; }
  table.table--gray-borders > thead > tr > td:last-child,
  table.table--gray-borders > thead > tr > th:last-child {
    border-right: #ddd 1px solid; }
  • URL: /components/raw/tables/tables.css
  • Filesystem Path: src/components/tables/tables.css
  • Size: 4.8 KB
  • Content: 
    @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';
//// Table Elements

table[border] {
  border-style: solid;
  border-color: #eee;
  td,
  th {
    border-color: #eee;
  }
}

table {
  background-color: $white;
  border-collapse: collapse;
  border-spacing: 0;
  color: $secondary;
  display: inline-block;
  font-size: $content-font-size;
  line-height: 1.15;
  max-width: 100%;
  overflow-x: auto;
  // @todo Add white-space: nowrap?
  width: 100%;

  tbody a {
    [class*="bg--gray"] &,
    [class*="bg--white"] &,
    [class*="bg--black"] &,
    [class*="bg--gold"] &,
    .bg-pattern--brain-reversed &,
    .bg--gold--pattern--brain &,
    .bg-pattern--brain &,
    .bg--white--pattern--brain &,
    .bg--black--pattern--brain &,
    .bg-pattern--brain-black & {
      color: $link-color;
    }
  }

  @include breakpoint(sm) {
    display: table;
  }

  p, ul, ol {
    font-size: $base-font-size;
  }

  ul, ol {
    p {
      margin-bottom: 0;
    }
  }

  td,
  th {
    padding: $md;
    font-size: $base-font-size;
  }

  th {
    color: $secondary;

    &:not([align]) {
      text-align: left;
    }
  }

  thead th {
    background-color: $primary;
    border: none;
    text-transform: uppercase;
    a {
      color: $secondary;
      [class*="bg--"] & {
        color: $secondary;
      }
    }
  }

  tbody th {
    background-color: #fff;
    border: none;
    position: static;
    left: 0;
    padding-left: $md;
  }

  tbody tr:not(.is-selected):nth-child(even),
  tbody tr:not(.is-selected):nth-child(even) th {
    background-color: $light;
  }

  &.table--hover-highlight tbody tr:not(.is-selected),
  &.table--hover-highlight tbody tr:not(.is-selected):nth-child(even) {
    &:hover {
      th {
        background-color: #fff3c3
      }
      background-color: #fff3c3;
    }
  }

  caption {
    width: 100%;
    padding: 1.05rem;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
    background-color: #333;
    font-weight: bold;
    a,
    :where(p) a:not(.bttn) {
      color: $primary;
      [class*="bg--"] &,
      [class*="bg--"] [class*="bg--"] & {
        color: $primary;
      }
    }
  }

  tbody tr:last-child td,
  tbody tr:last-child th {
    border-bottom-width: 0;
  }

  thead td,
  thead th {
    color: $secondary;
  }

  &.table--width-default {
    width: unset;
    caption {
      width: unset;
    }
  }
}

.table-responsive {
  overflow: auto;

  caption {
    text-align: left;
    @include breakpoint(sm) {
      text-align: center;
    }
  }

  &.table-sticky {
    height: 80vh;

    thead {
      position: sticky;
      top: 0;
      border-top: 0;
    }

    .table--gray-borders {
      thead th {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: -1px;
          top: 0;
          width: calc(100% + 2px);
          height: calc(100% + 1px);
          border-left: #7c7c7c 1px solid;
          border-bottom: #ddd 1px solid;
        }
        &:first-child:before {
          border-left: none;
        }
      }
    }
  }

  table {
    display: table;
  }
}

table.table--gray-borders {
  & > tr,
  & > tbody > tr,
  & > tfoot > tr {
    & > td,
    & > th {
      border: #ddd 1px solid;
    }
  }

  & > thead > tr,
  & > caption {
    & > td,
    & > th {
      border: #7c7c7c 1px solid;
    }
  }

  & > thead > tr {
    & > td,
    & > th {
      border-bottom: #ddd 1px solid;
      border-top: #ddd 1px solid;

      &:first-child {
        border-left: #ddd 1px solid;
      }

      &:last-child {
        border-right: #ddd 1px solid;
      }
    }
  }

}
  • URL: /components/raw/tables/tables.scss
  • Filesystem Path: src/components/tables/tables.scss
  • Size: 3.7 KB