<div class="wrapper">
    <h2>Employee Payroll</h2>
    <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>
</div>
<p style="text-align: center;">See full article: <a target="_blank" href="https://snippflow.com/snippet/css-responsive-table/">CSS Responsive Table</a>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f1f4f7;
    color: #3b495e;
    font-family: Inter;
    font-size: 1rem;
    line-height: 1.5;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* ---------------------------------------------------------- */
/*                  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; }
}