Table formatting for smaller screens/mobile devices

What is the best way to format tables so they display correctly on small/mobile devices? The tables look good on a large screen, but once responsive to small screens, all the table header rows stack up on top of each other and then all the table data lays below all these stacked rows. There should be a table header for each row of data, just as it displays on the screen. The only way I’ve been able to get around this is to create a separate table for each row of data. However, the tables then all have their own sizes and don’t resize consistently.

I’ve pasted a link with examples below. I’ve put tables inside the “accordion” element. I’ve also tried them in the “tab” element (going to abandon those as I don’t like how they look on the small screens either). So, for this post, please take a look at the tables inside the “accordion” element. The first accordion says NEW. I had to put in separate tables to make the headers show up correctly on a mobile device. However this is where the table sizes are inconsistent as they respond separately. The second accordion says USED. This is where you will see header rows stacked on a small screen. It also takes the first header row in the table, and repeats it inside each cell (I understand this, but it makes it so you can’t have a different title for each new rows).

Can you please help with formatting a table to display with a header row, table data, header row, table data, etc, on a mobile device? Again, they look great on the big screen, get messed up on a small screen.

Thanks!