My script like this :
<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-09:30</li>
<li>10:00-10:30</li>
</ul>
</td>
<td>
<ul>
<li>14:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>12:30-13:00</li>
<li>14:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>15:00-16:00</li>
</ul>
</td>
<td>
<ul>
<li>16:00-16:30</li>
</ul>
</td>
<td>
<ul>
<li>09:00-09:30</li>
</ul>
</td>
<td>
<ul>
<li>-</li>
</ul>
</td>
</tr>
</tbody>
</table>
Demo : https://jsfiddle.net/g9b7oj8t/
If it's accessed by desktop, it looks good
But if it's accessed by mobile, it looks messy
How do I customize css from materialize so that the display on mobile is neat?
This is a known issue with Materialize. Here you find the reference to the problem.
This is the proposed solution on GitHub.
<thead>
<tr>
<th>Mon<br/> </th>
<th>Tue<br/> </th>
<th>Wed<br/> </th>
<th>Thr<br/> </th>
<th>Fri<br/> </th>
<th>Sat<br/> </th>
<th>Sun<br/> </th>
</tr>
</thead>
Here the working example on JSFiddle
But to works properly you can't use too many styles inside the cells, otherwise the heights won't be respected.