*{
	margin: 0;
	padding: 0;
}
body{
	font: 12px/25px Tahoma;
}

p{
	padding: 20px;
}

table{
	width: 100%;
	border-collapse: separate;
}

th{
	background: #333;
	color: #fff;
}

th,td{
padding: 5px;
border: 1px solid #ddd;
}

@media only screen and (max-width: 721px){
	table,th,td,tr,tbody,thead{
		display: block;
	}

    thead th{
    	display: none;
    }

    td{
    	border: 0;
    	border-bottom: 1px solid#ddd;
    	position: relative;
    	padding-left: 50%;
    
    }

    td:before {
    	position: absolute;
    	top: 5px;
    	left: 5px;
    	width: 45%;
    	white-space: nowrap;
    }

    td:nth-of-type(1):before{
    	content: "First name :"
    }

    td:nth-of-type(2):before{
    	content: "Last name :"
    }

    td:nth-of-type(3):before{
    	content: "Email :"
    }

    td:nth-of-type(4):before{
    	content: "Job :"
    }

}