body { font-family: Arial, sans-serif; }   
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 18px; text-align: left; }   
th, td { padding: 12px; border-bottom: 1px solid #ddd; }  
th { background-color: #f2f2f2; color: #333; font-weight: bold; }    
tr:hover { background-color: #f5f5f5; }   
tr:nth-child(even) { background-color: #f9f9f9; }   
@media (max-width: 600px) {      
		table, thead, tbody, th, td, tr { display: block; }       
		thead tr { position: absolute; top: -9999px; left: -9999px; }        
		tr { border: 1px solid #ccc; margin-bottom: 10px; }        
		td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; text-align: right; }        td:before { content: attr(data-label); position: absolute; left: 10px; width: calc(50% - 20px); white-space: nowrap; text-align: left; font-weight: bold; }    }