“Gaya tabel yang responsif” Kode Jawaban

Gaya tabel yang responsif

#rt {
    width: 100%;
    border: 2px solid #ccc;
    border-collapse: collapse;
    }
#rt th, #rt td {
    padding: 3px;
    }
#rt th {
    text-align: left;
    background-color: #eee;
    padding: 5px;
    outline:1px solid #ccc;
    }

#rt td {
    padding-left: 5px;
    }

@media (max-width: 570px) {
    #rt {
        width: 100%;
        border: 2px solid #ccc;
        border-collapse: collapse;
        }
    #rt th, #rt td {
        display: block;
        padding: 3px;
        }
    #rt td::before {
        content: attr(data-header);
        font-weight: bold;
        display: inline-block;
        width: 50%;
        text-align: right;
        padding-right: 20px;
        }
    #rt th {
        text-align: left;
        background-color: #eee;
        padding: 5px;
        outline:1px solid #ccc;
        }
    #rt th[scope="col"] {
        display: none;
        }
    #rt td {
        padding-left: 5px;
        }
}