How to make a responsive table in CSS - php

Question

I have tried the piece of code mentioned below for a table, but it doesn't make it responsive. Can anyone make modifications to this code to make it responsive?
.content table {
border-collapse:collapse;
margin:0 0 1.625em;
width:100%;
font-size:90%
}
.content table h3 {
font-size:1em;
font-weight:300
}
.content tbody {
border-bottom:1px solid #444;
border-left:1px solid #444
}
.content tr:nth-child(odd) {
background-color:#eee
}
.content table th {
background-color:#0078d7;
color:#fff;
font-size:.85em
}
.content td,.content th {
vertical-align:top
}
.content th,.content td {
padding:3px 10px;
text-align:left;
border-top:1px solid #444;
border-right:1px solid #444
}
HTML
$menu .= '<table class="content"><thead><tr><th>Name</th><th>Description</th>‌​<th>Price</th></tr><‌​/thead>';
while ( have_rows('sections_items') ) : the_row();
// Your loop code
$menu .= '<tr><td>'.get_sub_field('dish_names').'</td><td>'.get_sub_f‌ield('dish_descripti‌​on').'</td><td>$ '.get_sub_field('dish_price').'</td></tr>';
endwhile;
$menu .= '</table> ';

Answer 1

What I did for showing table on mobile was either using bootstrap grid feature or modify table display style. I use them both depending on the content I want to show.
The key is to add #media query so that it changes based on screen size:
#media (max-width: 767px){
table{
//styles you want to change
}
}
If you have to use table elements, you can change the style of table and td elements to display: block on mobile and modify them from then.
Another way to do this which is not recommended is to create a whole new view for mobile only and hide the original table using media query. This creates duplicate data but gives you the freedom to custom mobile view at will.
example:
.mobile-table{ // or whatever class you want
display: none;
}
#media (max-width: 767px){
table{
display: none;
}
.mobile-table{
display: block;
}
}

Answer 2

If you want to resize your table according to the size of the window try using '#media' blocks so you can make sure your page looks exactly the same way you want
'#media' rule changes the css values according to the screen size
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
use this link to learn more

Answer 3

Try putting it in a container with overflow-x: auto, this should bring up a horizontal scroll bar for the table on screen resize. Here's an example
<div style="overflow-x:auto;">
<table class="content">
....
</table>
</div>
The above was answered keeping in mind the simple behavior of table "adding a scrollbar". My bad for not thinking and adding the advanced level of table responsiveness. If you are looking to have every row of your table to act as an individual table, when the screen size is too small, answer by Songqi Liu is the way to approach.
One more thing I would like to add to the styles relative for your table headers
td:nth-of-type(1):before { content: "Name"; }
td:nth-of-type(2):before { content: "Description"; }
td:nth-of-type(3):before { content: "Price"; }
This will set the headers to the left with the values on the right.
min-device-width and max-device-width are other attributes to interest if you are considering mobile. Check more here