/*no more table*/

@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    .table-container table,
    .table-container thead,
    .table-container tbody,
    .table-container th,
    .table-container td,
    .table-container tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .table-container table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .table-container table tbody tr {
            border: 1px solid #ccc;
        }

        .table-container table tbody td {
            /* Behave like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
            white-space: normal;
            text-align: left;
            min-height: 27px;
        }

            .table-container table tbody td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
            }

            /*
    Label the data
    */
            .table-container table tbody td:before {
                content: attr(data-title);
            }
}