Css 如何改进移动设备上的响应表视图？

我过去常做桌子

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

周一
星期二
结婚
苏氨酸
星期五
坐
太阳

09:00-13:00
10:00-14:30


10:00-14:30


09:00-13:00
10:00-14:30


09:00-13:00


09:00-13:00


09:00-13:00


-

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

但手机的前景并不乐观。它是这样的：

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

更新：

这是我的JSFIDLE:。它仍然不能与CSS flex display一起工作

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

---

这怎么办？

怎么了？表格宽度值太高，它将流向底部。您可以使用JSFIDLE或codepan显示它吗？我试过了，但没有成功。它不起作用。你能发布你的CSS吗？没有你所有的代码，我们无法复制问题进行调试。@Digital_Frankenstein我使用materialize.css。看看这个：