﻿@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    #mytable {
        width: 95%;
        align-content: center;
        align-items: center;
        align-self: center;
        text-align: center;
    }

        #mytable table, #mytable thead, #mytable tbody, #mytable th, #mytable td, #mytable tr {
            display: block;
        }

            #mytable thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        #mytable tr {
            border: 5px solid #ccc;
        }



        #mytable td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            #mytable td:before {
                /* Now like a table header */
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

        #mytable tr:nth-of-type(1) {
            display: none;
        }

        /*
		Label the data*/
        #mytable td:nth-of-type(2):before {
            content: "Credit";
            height:6em;
            font-size: 20px;
            width: 7em;
        }

        #mytable td:nth-of-type(3):before {
            content: "Debit";
            font-size: 20px;
            width: 7em;
        }

        #mytable td:nth-of-type(4):before {
            content: "Credit/Debit";
            font-size: 20px;
            width: 7em;
        }

        #mytable td:nth-of-type(5):before {
            content: "Cash";
            font-size: 20px;
            width: 7em;
        }

        #mytable td:nth-of-type(6):before {
            content: "Cheque/Zelle";
            font-size: 20px;
            width: 7em;
        }

        #mytable td:nth-of-type(7):before {
            content: "Total";
            font-size: 20px;
            width: 7em;
        }
}
