Table

This section shows the different styling options of HTML tables.

Table

First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.name
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Roland
            </td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:rolandmay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.name
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Small table

First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table table--small">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roland</td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:roymay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Table with leading column

Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table table--leading">
    <tbody>
        <tr>
            <td>Roland</td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:roymay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Table with alternating rows

First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<table class="table table--alternate">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roland</td>
            <td>
                May
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:roymay@yoveo.foo">
                    rolandmay@yoveo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>
                Mark
            </td>
            <td>
                Ross
                <div class="td__description">
                    Scrum master
                </div>
            </td>
            <td>
                <a href="mailto:mark.ross@skivee.foo">
                    mark.ross@skivee.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>
                Anton
                <div class="td__description">
                    Frontend key developer
                </div>
            </td>
            <td>
                <a href="mailto:m.anton@grkeo.foo">
                    m.anton@grkeo.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Tyler</td>
            <td>
                Nichols
                <div class="td__description">
                    Frontend developer
                </div>
            </td>
            <td>
                <a href="mailto:tyler.nichols@cogibox.foo">
                    tyler.nichols@cogibox.foo
                </a>
            </td>
        </tr>
        <tr>
            <td>Amanda Maria</td>
            <td>
                Kennedy
                <div class="td__description">
                    Chief product expert
                </div>
            </td>
            <td>
                <a href="mailto:amanda-maria-kennedy@gmail.foo">
                    amanda-maria-kennedy@gmail.foo
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Responsive scrolling table

First nameLast nameE-MailCountryCityDepartmentAgeHobbiesMonth of BirthFavourite color
Roland May
Frontend developer
rolandmay@yoveo.foo Austria Linz Development 41 Cycling, Skiing and Running February Orange
Mark Ross
Scrum master
mark.ross@skivee.name Germany Erlangen Management 44 Surfing and Snowboarding March Green
Melissa Anton
Frontend key developer
m.anton@grkeo.foo United States Milwaukee Research 52 Cooking and Arts April Purple
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo United States Boston UI 38 Family activities May Black
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo Germany Munich Development 42 Painting and Photographing December Dark blue
<div class="scrollableTableWrapper">
    <table class="table">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>E-Mail</th>
                <th>Country</th>
                <th>City</th>
                <th>Department</th>
                <th>Age</th>
                <th>Hobbies</th>
                <th>Month of Birth</th>
                <th>Favourite color</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Roland
                </td>
                <td>
                    May
                    <div class="td__description">
                        Frontend developer
                    </div>
                </td>
                <td>
                    <a href="mailto:rolandmay@yoveo.foo">
                        rolandmay@yoveo.foo
                    </a>
                </td>
                <td>
                    Austria
                </td>
                <td>
                    Linz
                </td>
                <td>
                    Development
                </td>
                <td>
                    41
                </td>
                <td>
                    Cycling, Skiing and Running
                </td>
                <td>
                    February
                </td>
                <td>
                    Orange
                </td>
            </tr>
            <tr>
                <td>
                    Mark
                </td>
                <td>
                    Ross
                    <div class="td__description">
                        Scrum master
                    </div>
                </td>
                <td>
                    <a href="mailto:mark.ross@skivee.foo">
                        mark.ross@skivee.name
                    </a>
                </td>
                <td>
                    Germany
                </td>
                <td>
                    Erlangen
                </td>
                <td>
                    Management
                </td>
                <td>
                    44
                </td>
                <td>
                    Surfing and Snowboarding
                </td>
                <td>
                    March
                </td>
                <td>
                    Green
                </td>
            </tr>
            <tr>
                <td>Melissa</td>
                <td>
                    Anton
                    <div class="td__description">
                        Frontend key developer
                    </div>
                </td>
                <td>
                    <a href="mailto:m.anton@grkeo.foo">
                        m.anton@grkeo.foo
                    </a>
                </td>
                <td>
                    United States
                </td>
                <td>
                    Milwaukee
                </td>
                <td>
                    Research
                </td>
                <td>
                    52
                </td>
                <td>
                    Cooking and Arts
                </td>
                <td>
                    April
                </td>
                <td>
                    Purple
                </td>
            </tr>
            <tr>
                <td>Tyler</td>
                <td>
                    Nichols
                    <div class="td__description">
                        Frontend developer
                    </div>
                </td>
                <td>
                    <a href="mailto:tyler.nichols@cogibox.foo">
                        tyler.nichols@cogibox.foo
                    </a>
                </td>
                <td>
                    United States
                </td>
                <td>
                    Boston
                </td>
                <td>
                    UI
                </td>
                <td>
                    38
                </td>
                <td>
                    Family activities
                </td>
                <td>
                    May
                </td>
                <td>
                    Black
                </td>
            </tr>
            <tr>
                <td>Amanda Maria</td>
                <td>
                    Kennedy
                    <div class="td__description">
                        Chief product expert
                    </div>
                </td>
                <td>
                    <a href="mailto:amanda-maria-kennedy@gmail.foo">
                        amanda-maria-kennedy@gmail.foo
                    </a>
                </td>
                <td>
                    Germany
                </td>
                <td>
                    Munich
                </td>
                <td>
                    Development
                </td>
                <td>
                    42
                </td>
                <td>
                    Painting and Photographing
                </td>
                <td>
                    December
                </td>
                <td>
                    Dark blue
                </td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

Usage

ElementClassDescription
.table .table--small Reduces the padding in the first column of the table.
.table .table--leading Adds a border to the top of the table if no table header is used. Additionally, it sets the first column bold.
.table .table--alternate Adds a light background color to every second table row and highlights the currently hovered row.
Table wrapper / parent element .scrollableTableWrapper Adds a scrolling behavior to the child table. If the table is too wide compared to the screen size, the table is scrollable horizontally.
A drop shadow indicates that there are more hidden columns.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top