Responsive HTML Tables

Simple responsive table

Add horizontal scrollbar

table {
    width: 100%;
}
.table-container {
    max-width: 100%;
    overflow-x: scroll;
}

Horizontal tables using data attributes

Hide the table row and add the data-cell value before the table cell

@media (max-width: 650px) {
    th {
    display: none;
    }

    td {
    display: block;
    padding: 0.5rem 1rem;
    }

    td::before {
    content: attr(data-cell) " : "
    font-weight: 700;
    text-transform: capitalize;
    }
}