如何在移动设备上改善响应表视图？

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

Answer 1

使用CSS flex显示，