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

@media only screen and (max-width:1200px) {

    .responsive>tbody,
    .responsive>tbody>tr,
    .responsive>thead,
    .responsive>thead>th {
        display: block
    }

    .responsive>tbody>tr>th,
    .responsive>thead>tr,
    .responsive>thead>tr>th {
        position: absolute;
        top: -9999px;
        left: -9999px
    }

    .responsive>tbody>tr {
        border: 1px solid #ccc
    }

    .responsive>tbody>tr>td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        white-space: normal;
        text-align: left;
        display: block;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        min-height: 1em
    }

    .responsive>tbody>tr>td::before {
        color: #888;
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        text-align: left;
        font-weight: 700;
        content: attr(data-title);
    }

    .responsive td.responsive-omit-title:nth-child(even),
    .responsive td.responsive-omit-title:nth-child(odd) {
        padding-left: 6px
    }

    .responsive td.responsive-omit-if-empty:empty,
    .responsive td.responsive-omit-title::before {
        display: none
    }
}