How To Create A Responsive Table Using CSS

Responsive Table that can be fit in any devices. With these simple lines of HTML code, all tables look good on Responsive and will never break your layout on mobile devices. Responsive Table is flexible to fit in screens of any devices with CSS3 Media Queries. On mobile devices, we know that we won't have enough space to show all these columns, so we need to allow table to be scrolled vertically or horizontally with ease or switch to table in the tabular form.

Responsive Table

For Responsive table simply insert a table code and apply the class "mytable" or any class name which are suitable and then add the class "mytable" to table(<table class="mytable">). The styles to make the table responsive are added by applying a media query with rules to switch to the tabular form.

Responsive Table HTML
<table class="mytable">
    <thead>
        <tr>
            <th>Sr. No.</th>
            <th>Name</th>
            <th>EMP Code</th>
            <th>Contact No.</th>
            <th>Email ID</th>
            <th>Feedback Data</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Name</td>
            <td>EMP:01245</td>
            <td>+91 425789569</td>
            <td>xyz@xyz.com</td>
            <td>Ganga, Krishna, Narmada, Kaveri – many of our great rivers are depleting fast. </td>            
        </tr>
        <tr>
            <td>2</td>
            <td>Name</td>
            <td>EMP:01245</td>
            <td>+91 425789569</td>
            <td>xyz@xyz.com</td>
            <td>Ganga, Krishna, Narmada, Kaveri – many of our great rivers are depleting fast. </td>            
        </tr>
        <tr>
            <td>3</td>
            <td>Name</td>
            <td>EMP:01245</td>
            <td>+91 425789569</td>
            <td>xyz@xyz.com</td>
            <td>Ganga, Krishna, Narmada, Kaveri – many of our great rivers are depleting fast. </td>            
        </tr>
        <tr>
            <td>4</td>
            <td>Name</td>
            <td>EMP:01245</td>
            <td>+91 425789569</td>
            <td>xyz@xyz.com</td>
            <td>Ganga, Krishna, Narmada, Kaveri – many of our great rivers are depleting fast. </td>            
        </tr>
    </tbody>
</table> 
Responsive Table styles and attributes
<style>
    table.mytable {
        margin: 0 auto;
        border-collapse: collapse;
        width: 100%;
        background: #fff;
    }
    table.mytable thead th {
        padding: 15px 10px;
        font-size: 15px;
        color: #797777;
        border-bottom: 2px solid #2f2b68;
        font-weight: normal;
        word-wrap: break-word;
        white-space: nowrap;
        font-weight: 500;
        text-align: left;
        background: #333;
    }
    table.mytable tbody td {
        padding: 15px 10px;
        font-size: 14px;
        color: #858585;
        font-weight: normal;
        border-bottom: 1px solid #dcdcdc;
    }
    table.mytable tbody td > a > a {
        color: #333;
        text-decoration: none;
    }
    table.mytable tbody tr:nth-child(odd){
        background: #fff;
    }
    table.mytable tbody tr:nth-child(even) {
        background: #f6f6f6;
    }
    @media screen and (max-width: 767px) {
        table.mytable caption {
            background-image: none;
        }
        table.mytable thead {
            display: none;
        }
        table.mytable tbody td {
            display: block;
            padding: 10px;
            text-align: left;
        }
        table.mytable tbody td:before:before {
            content: attr(data-th);
            font-weight: bold;
            display: inline-block;
            width: 100%;
        }
    }
    @media screen and (max-width: 767px) {
        table.mytable thead th {
        padding: 10px;
        }
        table.mytable tbody td {
            padding: 10px;
        }
    }
</style>

Responsive Table tutorials

You can customize this code further as per your requirement.