How to Create Responsive Tables in WordPress without Using Plugin

In this quick short video, I will show you how to create responsive tables in WordPress without using any plugin.

Custom JS Code

<script>
document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll("table").forEach(table => {
    const headers = Array.from(table.querySelectorAll("thead th"));
    table.querySelectorAll("tbody tr").forEach(row => {
      row.querySelectorAll("td").forEach((cell, i) => {
        const heading = headers[i]?.textContent.trim();
        if (heading) cell.dataset.heading = heading;
      });
    });
  });
});
</script>

Custom CSS Code

/** Responsive Table Begins */
.wpf-responsive-table td,
.wpf-responsive-table th {
    border: 0px solid #dddddd;
}

.wpf-responsive-table thead {
    border-bottom: 0px solid;
}

.wpf-responsive-table tr {
    border-bottom: 1px solid #dddddd;
}

.wpf-responsive-table table {
    border-width: 0px 1px 0px 1px;
}

.wpf-responsive-table table tr:hover {
    background: #F8FFC1;
}

.wpf-responsive-table table th,
.wpf-responsive-table table th:hover {
    background: #1F2933;
}

.wpf-responsive-table table thead tr {
    background: #1F2933;
    color: #ffffff;
}

@media (max-width: 580px) {
    .wpf-responsive-table table thead {
        display: none;
    }

    .wpf-responsive-table td {
        display: block;
        border-bottom: 0px !important;
    }

    .wpf-responsive-table table td::before {
        content: attr(data-heading) ": ";
        font-weight: bold;
    }

    .wpf-responsive-table tr {
        border: 1px solid #dddddd;
    }
}

/** Responsive Table Ends */

If you face any issues, let me know in the comment section below.