@media (max-width: 500px) {
    .responsive-table-line td:before { content: attr(data-title); }
    .responsive-table-line table,
    .responsive-table-line thead,
    .responsive-table-line tbody,
    .responsive-table-line th,
    .responsive-table-line td,
    .responsive-table-line tr {
        display: block;
    }

    .responsive-table-line thead tr {
        display:none;
    }
    .responsive-table-line td {
        position: relative;
        border: 0px solid transparent;
        padding-left: 50% !important;
        white-space: normal;
        text-align:right;
    }

    .responsive-table-line td:before {
        position: absolute;
        top: 0px;
        left: 5px;
        width: 45%;
        height:100%;
        white-space: nowrap;
        text-overflow: ellipsis !important;
        overflow:hidden !important;
        text-align:left;
        padding:2px;
        border-right: 1px solid #cccccc;
        font-weight: bold;
    }

    .responsive-table-line td:first-child {
        border-top: 2px solid #000000;
    }
}