Making a css table vertical on phone devices

Hello there. I have a table that has up to 8 fields. I tried playing around with the media queries but I can't set it up properly. On desktop resolutions the table is horizontal and everything is streching nicely, however on phone devices it gets messy.

Basically on phone devices the table must become vertical, so the 'th' and 'td' are in an inline-block next to each other, else it's stretching really widely and it's almost unreadable.

Thank you all for the help. Here is what I have and what I have tried.

The table for desktop devices - horizontal

#customers {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif ;
border-collapse: collapse ;
width: 100% ;

}

#customers td, #customers th {

border: 1px solid #ddd ;
padding: 2px 2px ;
text-align: center ;

}

#customers tr:nth-child(even) {

background-color: #f2f2f2 ;

}

#customers tr:hover {

background-color: #ddd ;

}

#customers th {

width:8% ;    
padding-top: 12px ;
padding-bottom: 12px ;
background-color: #4CAF50 ;
color: white ;

}

The media query for phone devices I have tried - It must become vertical

@media (min-width: 320px) and (max-width: 480px) {

#customers {

max-width: 100% ;

}

#customers td, #customers th {

display: inline-block ;

}


}