@media screen and (max-width: 600px) {
    table {
        width: 100%;
    }

    thead {
        display: none;
    }

    tr:nth-of-type(2n) {
        background-color: inherit;
    }

    tr td:first-child {
        background: #f0f0f0;
        font-weight: bold;
        font-size: 1.1em;
    }

    tbody td {
        display: block;
        text-align: center;
    }

    tbody td:before {
        content: attr(data-th);
        display: block;
        text-align: center;
    }

    .text-left,
    .text-right {
        text-align: center;
    }
}