#page-wrap{margin:50px;}
.grid-table{width:100%;border-collapse:collapse;}
.grid-table tr:nth-of-type(odd){background:#eee;}
.grid-table th{background:#473E36;color:white;font-weight:bold;}
.grid-table td, th{padding:6px;border:1px solid #ccc;text-align:left;}
@media
only screen and (max-width:760px),
(min-device-width:768px) and (max-device-width:1024px){.grid-table, thead, tbody, th, td, tr{display:block;}
.grid-table thead tr{position:absolute;top:-9999px;left:-9999px;}
.grid-table tr{border:1px solid #ccc;}
.grid-table td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%;}
.grid-table td:before{position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap;}
.grid-table td:nth-of-type(1):before{content:"First Name";}
.grid-table td:nth-of-type(2):before{content:"Last Name";}
.grid-table td:nth-of-type(3):before{content:"Job Title";}
.grid-table td:nth-of-type(4):before{content:"Favorite Color";}
.grid-table td:nth-of-type(5):before{content:"Wars of Trek?";}
.grid-table td:nth-of-type(6):before{content:"Porn Name";}
.grid-table td:nth-of-type(7):before{content:"Date of Birth";}
.grid-table td:nth-of-type(8):before{content:"Dream Vacation City";}
.grid-table td:nth-of-type(9):before{content:"GPA";}
.grid-table td:nth-of-type(10):before{content:"Arbitrary Data";}
}
@media only screen
and (min-device-width:320px)
and (max-device-width:480px){@media only screen and (min-device-width:768px) and (max-device-width:1024px){}