I am currently utilizing for creating a table
This is the HTML code I have implemented:
<table class="responsive-table">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thr</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>09:00-13:00</li>
<li>10:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>10:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>09:00-13:00</li>
<li>10:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>09:00-13:00</li>
</ul>
</td>
<td>
<ul>
<li>09:00-13:00</li>
</ul>
</td>
<td>
<ul>
<li>09:00-13:00</li>
</ul>
</td>
<td>
<ul>
<li>-</li>
</ul>
</td>
</tr>
</tbody>
</table>
The desktop view appears organized, resembling this :
However, the mobile view is not as neat. It looks like this :
How can I clean up the display on mobile devices? My requirement is to utilize the ul tag inside the td tag
Updated Information :
Here is a link to my jsfiddle : https://jsfiddle.net/oh94xncb/. Unfortunately, it still does not seem to be working correctly