ساخت جدول ریسپانسیو با html و css بدون جاوااسکریپت

<table class="responsive-table">
    <thead>
        <tr>
            <th>عنوان ۱</th>
            <th>عنوان ۲</th>
            <th>عنوان ۳</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>محتوا ۱</td>
            <td>محتوا ۲</td>
            <td>محتوا ۳</td>
        </tr>
        <tr>
            <td>محتوا ۴</td>
            <td>محتوا ۵</td>
            <td>محتوا ۶</td>
        </tr>
        <tr>
            <td>محتوا ۷</td>
            <td>محتوا ۸</td>
            <td>محتوا ۹</td>
        </tr>
    </tbody>
</table>

.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.responsive-table th {
    background-color: #f2f2f2;
}

@media screen and (max-width: 600px) {
    .responsive-table,
    .responsive-table thead,
    .responsive-table tbody,
    .responsive-table th,
    .responsive-table td,
    .responsive-table tr {
        display: block;
        width: 100%;
    }

    .responsive-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .responsive-table tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
    }

    .responsive-table td {
        text-align: right;
        position: relative;
        padding-left: 50%;
    }

    .responsive-table td:before {
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        text-align: left;
    }
}