How to make responsive a table?

> <table style="width:100%">
>   <tr>
>     <th>Firstname</th>
>     <th>Lastname</th> 
>     <th>Age</th>
>   </tr>
>   <tr>
>     <td>Jill</td>
>     <td>Smith</td>
>     <td>50</td>
>   </tr>
>   <tr>
>     <td>Eve</td>
>     <td>Jackson</td>
>     <td>94</td>
>   </tr>
>   <tr>
>     <td>John</td>
>     <td>Doe</td>
>     <td>80</td>
>   </tr>
> </table>

How to make responsive on mobile? To make Firstname Lastname and Age stack under elements? Like not show as a table on mobile show as vertical not horizontal?

Thanks

Just so I am clear, can you show how you would want the above table to layout on mobile? Where would the header vs. values be placed?