如何改善移动设备上的响应式表格视图？

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>

dekstop 的视图很整洁。是这样的：

enter image description here

但移动端的观点并不好。是这样的：

enter image description here

如何整理手机上的显示？我需要在 td 标签内使用 ul 标签

更新：

这是我的 jsfiddle：https://jsfiddle.net/oh94xncb/。还是不行

Answer 1

使用 CSS flex 显示，

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

这个怎么样？