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-striped to allow the table to automatically apply different background color for even elements.

Use table-hover to allow the table to automatically apply different background color when hovering elements.

Use table-layout-auto to allow the width of the table and its cells to be adjusted to fit the content. Most browsers use this algorithm by default.

Use table-layout-fixed When using this keyword, the table's width needs to be specified explicitly using the width property.

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


        <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>