Why does my table not scale within the div? - html

Question

I have a very simple webpage for homework. The body just consists of various sections div /divbr. The effect is various boxes for each part. Most of my students don't have a computer, they only have a mobile phone. So I am trying to make the webpage display better on mobile phones. I put:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the header.
I set all divs to width:95%;
Everything displays nicely on my phone now. The text is a good size, everything is within the confines of the mobile phone screen, no need to magnify with 2 fingers.
EXCEPT my table.
.div-table
{
width:95%;
border:3px;
border-style:solid;
border-color:#FF0000;
text-align:center;
background-color:#32d140;
}
table
{
margin:0 auto;
width:90%;
text-align:center;
background-color:whitesmoke;
border-collapse: separate;
border: 2px solid black;
}
table td {
/*border: 2px solid black;*/
border-style:dotted;
border-width:3px;
border-collapse:separate;
padding: 10px;
}
<div class="div-table">
<p>
<table>
<tr> <td>A watches</td> <td>B cinema</td> <td>C weird</td> <td>D doesn't</td> <td>E like</td> </tr>
<tr> <td>F games</td> <td>G talking</td> <td>H guy</td> <td>I unusual</td> <td>J teaches</td> </tr>
</table>
</p>
</div>
The table spills over its div. You can scroll right a bit to see the last columns. The table was 2 rows of 5 cells. I changed it to 5 rows of 2 cells to get around this now, but I prefer 2 rows 5 columns.
Why does my table not shrink to fit its div? Could you please help me tweak the css to shrink the table?

Answer 1

Basically your table is overflowing, to make it neat and clean you can make it responsive. You can either make the table responsive by adding a horizontal scroll, so users can scroll and see the content. You just have to add following styles in media query, You can see it here
#media (max-width: 767px){
.div-table{
overflow-x: auto;
}
.div-table table{
width: 100%;
}
}
Or, Other option is stacking it vertically which is bit more user friendly, you can see it here

Answer 2

I'm not sure you can confine the table within the div and successfully display it at every resolution.
An alternative solution would be to allow the table to overflow, thereby making it scrollable:
Adding overflow-x: auto; to div-table should work for you:
CSS
.div-table {
width:95%;
border:3px;
border-style:solid;
border-color:#FF0000;
text-align:center;
background-color:#32d140;
overflow-x:auto;
}
.div-table {
width:95%;
border:3px;
border-style:solid;
border-color:#FF0000;
text-align:center;
background-color:#32d140;
overflow-x:auto;
}
table {
margin:0 auto;
width:90%;
text-align:center;
background-color:whitesmoke;
border-collapse: separate;
border: 2px solid black;
}
table td {
/*border: 2px solid black;*/
border-style:dotted;
border-width:3px;
border-collapse:separate;
padding: 10px;
}
<div class="div-table">
<p>
<table>
<tr> <td>A watches</td> <td>B cinema</td> <td>C weird</td> <td>D doesn't</td> <td>E like</td> </tr>
<tr> <td>F games</td> <td>G talking</td> <td>H guy</td> <td>I unusual</td> <td>J teaches</td> </tr>
</table>
</p>
</div>