.page-wrap {
    margin: 10px;
}

.page-wrap2 {
    margin: 10px;
}

.page-wrap3 {
    margin: 10px;
}

.page-wrap4 {
    margin: 10px;
}

p {
    margin: 20px 0;
}

/* 
	Generic Styling, for Desktops/Laptops 
	*/
table {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background: #eee;
}

th {
    background: #0b688a;
    color: white;
    font-weight: bold;
}

td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: right;
}


@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
        direction: rtl;
        text-align: center;
    }

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

    tr {
        border: 1px solid #ccc;
    }

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

        td:after {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            right: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

    /*
		Label the data
		*/
    .page-wrap td:nth-of-type(1):after {
        content: "نام نرم افزار";
    }

    .page-wrap td:nth-of-type(2):after {
        content: "با قفل نرم افزاری";
    }

    .page-wrap td:nth-of-type(3):after {
        content: "با قفل سخت افزاری";
    }

    .page-wrap td:nth-of-type(4):after {
        content: "با قفل سخت افزاری";
    }

    .page-wrap td:nth-of-type(5):after {
        content: "قفل سخت افزاری اضافه";
    }

    .page-wrap td:nth-of-type(6):after {
        content: "خرید";
    }

    .page-wrap2 td:nth-of-type(1):after {
        content: "نام سخت افزار";
    }

    .page-wrap2 td:nth-of-type(2):after {
        content: "قیمت";
    }

    .page-wrap2 td:nth-of-type(3):after {
        content: "توضیحات";
    }

    .page-wrap2 td:nth-of-type(4):after {
        content: "خرید";
    }

    /*--------*/
    .page-wrap3 td:nth-of-type(1):after {
        content: "ردیف";
    }

    .page-wrap3 td:nth-of-type(2):after {
        content: "امکانات نرم افزار";
    }

    .page-wrap3 td:nth-of-type(3):after {
        content: "پایه";
    }

    .page-wrap3 td:nth-of-type(4):after {
        content: "پیشرفته";
    }

    .page-wrap3 td:nth-of-type(5):after {
        content: "ویژه";
    }

    .page-wrap3 td:nth-of-type(6):after {
        content: "جامع";
    }

    /*--------*/
    .page-wrap4 td:nth-of-type(1):after {
        content: "ردیف";
    }

    .page-wrap4 td:nth-of-type(2):after {
        content: "شرح";
    }

    .page-wrap4 td:nth-of-type(3):after {
        content: "پایه";
    }

    .page-wrap4 td:nth-of-type(4):after {
        content: "پیشرفته";
    }

    .page-wrap4 td:nth-of-type(5):after {
        content: "ویژه";
    }

    .page-wrap4 td:nth-of-type(6):after {
        content: "جامع";
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 495px;
    }
}