table{
	
margin: 1rem auto;
text-align: center;
width: 80%;
max-width: 80%;
border-collapse: collapse;
border: 1px solid

}
		
	
thead{

background-color: purple;
color: white

}
	

th,td{padding:8px 0}

tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
	
@media only screen and (max-width: 800px) {
		
table, 
thead, 
tbody, 
th, 
td, 
tr{ 
	
display: block
	
}
	
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
 
 
 
td { 
	
position: relative;
padding-left: 50%; 
white-space: normal;
text-align: left
	
	}
 
td:before { 
	
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
font-weight: bold;
white-space: nowrap;
text-align:left;
content: attr(data-title)
	
	}
}