I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll.
https://i.sstatic.net/kA70L.png
Despite my best efforts, I can't seem to figure out why this issue is happening. As someone relatively new to coding, my code might not be the cleanest. Can anyone identify the problem or suggest any tweaks?
Your assistance would be greatly appreciated.
body {
font-family: proxima nova;
}
th,
td {
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}
td {
padding: 1% 2%;
}
th {
background: #44A499;
color: white;
padding: 1% 2%;
}
td:hover {
cursor: pointer;
background: #44A499;
color: white;
}<table width="100%" align="center">
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Thrusday</th>
</tr>
</div>
<tr>
<th>16:15 - 17:45 </th>
<td>
<!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td>
<td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td title="No Class" class="Holiday"></td>
</div>
</tr>
<tr>
<th>18:00 - 19:45</td>
<td>Dynamic Yoga at the Dragon Theater, Barmouth.</td>
<td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
</div>
</tr>
</div>
</tr>
</table>