Skip to main content
x
Dartmouth-Hitchcock logo
Summer Flowers In This Section

Tables

Default Styling

# First Name Last Name Team
1 Jennifer Jones Marvel
2 Jane Smith DC
3 Robert Smith-Jones Hanna-Barbera
<table>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Team</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Jennifer</td>
            <td>Jones</td>
            <td><a href="">Marvel</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Smith</td>
            <td><a href="">DC</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Robert</td>
            <td>Smith-Jones</td>
            <td><a href="">Hanna-Barbera</a></td>
        </tr>
    </tbody>
</table>

Full width

Add a wide class to make the table fill the width of its container.

# First Name Last Name Team
1 Jennifer Jones Marvel
2 Jane Smith DC
3 Robert Smith-Jones Hanna-Barbera
<table class="wide">…

Responsive Tables

There are three solutions to choose from. Use your best judgement and test.

Solution No. 1

Do nothing. For example, the table above will shrink down nicely and is still quite usable at phone widths.

Solution No. 2

Add two wrapper divs and hide the overflow.

County/Region City Phone
Belknap/Merrimack Concord (603) 225-6880
  Franklin (603) 934-3444
  Laconia (603) 524-5512
  Meredith (603) 279-4096
  Suncook (603) 485-7824
  Warner (603) 456-2207
Rockingham Portsmouth (603) 436-3896
  Salem (603) 898-8435
<div class="rtable2--wrapper">
    <div class="rtable2">
        <table class="wide">
            <thead>
                <tr>
                    <th scope="col">County/Region</th>
                    <th scope="col">City</th>
                    <th scope="col">Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Belknap/Merrimack</td>
                    <td>Concord</td>
                    <td>(603) 225-6880</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>Franklin</td>
                    <td>(603) 934-3444</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>Laconia</td>
                    <td>(603) 524-5512</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>Meredith</td>
                    <td>(603) 279-4096</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>Suncook</td>
                    <td>(603) 485-7824</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>Warner</td>
                    <td>(603) 456-2207</td>
                </tr>
                <tr>
                    <td>Rockingham</td>
                    <td>Portsmouth</td>
                    <td>(603) 436-3896</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>Salem</td>
                    <td>(603) 898-8435</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Solution No. 3

Add an rtable class to the table and data attributes to the table cells. The cells will stack at narrow widths and data attributes will get displayed as headings. When a table is assigned the rtable class, empty table cells with a data attribute won't display for mobile, and cells without a data attribute will not display for mobile.

City Agency Phone
Addison County Addison County Community Action (802) 388-2285
Barre Central VT Community Action (802) 479-1053
(800) 639-1053
Barton NEKCA (802) 525-6291
Bellows Falls SEVCA (802) 722-4575
Bennington BROC (Bennington-Rutland Opportunity Council) (802) 775-0878
Bradford CVAC (802) 222-5419
Open Monday-Thursday.
<table class="wide rtable">
    <thead>
        <tr>
            <th scope="col">City</th>
            <th scope="col">Agency</th>
            <th scope="col">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-th="City">Addison County</td>
            <td data-th="Agency">Addison County Community Action</td>
            <td data-th="Phone">(802) 388-2285</td>
        </tr>
        <tr>
            <td data-th="City">Barre</td>
            <td data-th="Agency">Central VT Community Action</td>
            <td data-th="Phone">(802) 479-1053<br>
            (800) 639-1053</td>
        </tr>
        <tr>
            <td data-th="City">Barton</td>
            <td data-th="Agency">NEKCA</td>
            <td data-th="Phone">(802) 525-6291</td>
        </tr>
        <tr>
            <td data-th="City">Bellows Falls</td>
            <td data-th="Agency">SEVCA</td>
            <td data-th="Phone">(802) 722-4575</td>
        </tr>
        <tr>
            <td data-th="City">Bennington</td>
            <td data-th="Agency">BROC (Bennington-Rutland Opportunity Council)</td>
            <td data-th="Phone">(802) 775-0878</td>
        </tr>
        <tr>
            <td data-th="City">Bradford</td>
            <td data-th="Agency">CVAC</td>
            <td data-th="Phone">(802) 222-5419<br>
            Open Monday-Thursday.</td>
        </tr>
    </tbody>
</table>

0