table {
    width: 100%;
    border-spacing: 0;
}
td,
tr,
th {
    margin: 0;
    border: none;
    hyphens: none;
}
tr {
    margin-bottom: 2%;
    background: #dddddd;
}
td,
th {
    box-shadow: 0px -1px 0px #c3c3c3;
    padding: 1.5%;
    padding-left: 3%;
    padding-right: 3%;
    line-height: 1.2em;
}
th,
thead td,
td:before {
    padding-top: 2.5%;
    color: #999;
    font-size: 0.9em;
    font-weight: normal;
    text-align: left;
}
@media only screen and (min-width: 600px) {
    tr:last-child td {
        padding-bottom: 2%;
    }
}
@media only screen and (max-width: 600px) {
    td,
    th {
        width: auto!important;
    }
    table:not(.nowrap),
    table:not(.nowrap) thead,
    table:not(.nowrap) tbody,
    table:not(.nowrap) th,
    table:not(.nowrap) td,
    table:not(.nowrap) tr {
        display: block;
    }
    table:not(.nowrap) thead tr {
        display: none;
    }
    table:not(.nowrap) td:before {
        content: attr(data-title) "\00a0";
    }
    table:not(.nowrap) td:first-child {
        padding-top: 3%;
        box-shadow: none;
    }
    table:not(.nowrap) td:last-child {
        padding-bottom: 2%;
    }
}