Column Hiding Table

<!DOCTYPE html>
<title>My Example</title>

/* 
  By default, all columns are visible. The logic is in the media query below.
  The .hide-on-mobile class itself does nothing on desktop screens.
*/

/* --- Responsive Logic --- */
/* This media query targets screens 768px wide or smaller */
@media screen and (max-width: 768px) {
    /* The magic happens here: hide elements with this class */
    .hide-on-mobile {
        display: none;
    }
}
</style>

<table class="column-hiding-table">
    <thead>
        <tr>
            
            <th scope="col" class="hide-on-mobile">User ID</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            
            <th scope="col" class="hide-on-mobile">Sign-up Date</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
            <td class="hide-on-mobile">9812</td>
            <td>Alex Chen</td>
            <td>Administrator</td>
            
            <td class="hide-on-mobile">2023-05-11</td>
            <td>Active</td>
        </tr>
        <tr>
            <td class="hide-on-mobile">9954</td>
            <td>Brenda Morales</td>
            <td>Editor</td>
            <td class="hide-on-mobile">2023-08-01</td>
            <td>Active</td>
        </tr>
        <tr>
            <td class="hide-on-mobile">10023</td>
            <td>Carlos Pinto</td>
            <td>Contributor</td>
            <td class="hide-on-mobile">2024-01-20</td>
            <td>Pending</td>
        </tr>
        <tr>
            <td class="hide-on-mobile">10156</td>
            <td>Diana Rodriguez</td>
            <td>Editor</td>
            <td class="hide-on-mobile">2024-02-15</td>
            <td>Inactive</td>
        </tr>
    </tbody>
</table>