How can I custom table responsive materialize?

Answer 1

You just have missed an outer div. As per the BS4 guidelines -

To create a responsive table, enclose the table in a element that has the .table-responsive class (or one of the .table-responsive-* classes) applied.

So, your code with updated classes would be -

<div class="table-responsive">
  <table class="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>
</div>
<style>
ul {
  list-style-type: none;
  padding: 5px;
}
</style>

Refer this for more information

Answer 2

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/>&nbsp;</th>
        <th>Tue<br/>&nbsp;</th>
        <th>Wed<br/>&nbsp;</th>
        <th>Thr<br/>&nbsp;</th>
        <th>Fri<br/>&nbsp;</th>
        <th>Sat<br/>&nbsp;</th>
        <th>Sun<br/>&nbsp;</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.