CSS Responsive Table

CSS responsive table is a solution that makes user experience better when viewing data on different devices. By using media queries and data-attr attributes the tables will automatically adjust to the screen size so it’s readable and navigable on big monitors and small smartphone screens. Responsive tables eliminate the need for horizontal scrolling, makes it more useful and looking good. It helps to organize data better so user can find the information they need regardless of the device being used.

HTML

<table class="sc-responsive-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
            <th>Hours Worked</th>
            <th>Overtime Hours</th>
            <th>Total Pay</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Name">John Doe</td>
            <td data-label="Position">Software Engineer</td>
            <td data-label="Salary">$4,500</td>
            <td data-label="Hours Worked">160</td>
            <td data-label="Overtime Hours">10</td>
            <td data-label="Total Pay">$5,000</td>
        </tr>
        <tr>
            <td data-label="Name">Jane Smith</td>
            <td data-label="Position">Project Manager</td>
            <td data-label="Salary">$5,000</td>
            <td data-label="Hours Worked">160</td>
            <td data-label="Overtime Hours">5</td>
            <td data-label="Total Pay">$5,500</td>
        </tr>
        <tr>
            <td data-label="Name">Michael Brown</td>
            <td data-label="Position">Data Analyst</td>
            <td data-label="Salary">$4,000</td>
            <td data-label="Hours Worked">160</td>
            <td data-label="Overtime Hours">8</td>
            <td data-label="Total Pay">$4,800</td>
        </tr>
        <tr>
            <td data-label="Name">Emily Johnson</td>
            <td data-label="Position">UX Designer</td>
            <td data-label="Salary">$4,200</td>
            <td data-label="Hours Worked">160</td>
            <td data-label="Overtime Hours">6</td>
            <td data-label="Total Pay">$4,620</td>
        </tr>
    </tbody>
</table>

CSS

/* ---------------------------------------------------------- */
/*                  Snippflow Responsive Table                */
/* ---------------------------------------------------------- */

.sc-responsive-table { width: 100%; border-collapse: collapse; margin: 20px 0; text-align: left; font-size: 15px; }
.sc-responsive-table thead { background-color: #333; color: #fff; }
.sc-responsive-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,.03); }
.sc-responsive-table th,
.sc-responsive-table td { padding: 10px 15px; border-bottom: 1px solid rgba(0,0,0,.06); }

@media only screen and (max-width: 767px) {
    .sc-responsive-table thead { display: none; }
    .sc-responsive-table tbody { display: block; width: 100%; }
    .sc-responsive-table tbody tr,
    .sc-responsive-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,.03); }
    .sc-responsive-table tr { display: block; padding: 15px; margin-bottom: 15px; }
    .sc-responsive-table td { display: flex; align-items: center; justify-content: space-between; text-align: right; font-weight: 700; padding-left: 0; padding-right: 0; }
    .sc-responsive-table td:before { content: attr(data-label); margin-right: auto; font-weight: 400; }
    .sc-responsive-table td:last-child {border-bottom: 0; }
}

Result:

See the Pen CSS Responsive Table by Snippflow (@snippflow) on CodePen.

See also

• CSS Responsive Comparison Table
• Flexbox button with 3 styles and variations
• Gallery with varied image sizes using aspect-ratio and object-fit
• Tooltips with Positioning (Top, Bottom, Left, Right)
• Floating Icon Bar with tooltips