How can I custom table responsive materialize?

Question

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?

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.