Tables

Table layout

Class Properties
table-layout-auto table-layout: auto;
table-layout-fixed table-layout: fixed;

Basic usage

Use table-responsive to allow the table to automatically change format for mobile.

Use table-hover to allow the table to automatically apply different background color for even elements.

No. Name Age Sex Status Location
10001 Lorem ipsum dolor sit amet consectetur adipisicing elit. Error illum reprehenderit, consectetur quia magni fuga distinctio porro vero quae esse, officiis, in facere laboriosam placeat. 26 Male Single San Francisco
10002 Leanne Graham 39 Female Married Gwenborough
10003 Ervin Howell 45 Female Divorced Wisokyburgh
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
10004 Dennis Schulist 29 Male Single South Christy
Code HTML

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="Name">Dave Gamache</td>
                    <td data-label="Age">26</td>
                    <td data-label="Sex">Male</td>
                    <td data-label="Location">San Francisco</td>
                </tr>
                <tr>
                    <td data-label="Name">Leanne Graham</td>
                    <td data-label="Age">39</td>
                    <td data-label="Sex">Female</td>
                    <td data-label="Location">Gwenborough</td>
                </tr>
            </tbody>
        </table>