Как улучшить отзывчивый вид таблицы на мобильном телефоне?

Question

Я использую https://materializecss.com/table.html для создания таблицы

Мой HTML-код выглядит так:

<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>

Вид декстопа аккуратный. Это примерно так:

введите описание изображения здесь

Но представление о мобильном телефоне не обязательно. Вот так:

введите описание изображения здесь

Как привести в порядок дисплей на мобильном телефоне? Мне нужно использовать тег ul внутри тега td

Обновление:

Это мой jsfiddle: https://jsfiddle.net/oh94xncb/. Это все еще не работает

Answer 1

С CSS flex flex,

.responsive-table tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

как насчет этого?