时间戳

首页 > 解决方案 > 如何自定义表格响应具体化？

css - 如何自定义表格响应具体化？

问题描述

我的脚本是这样的：

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

演示：https ://jsfiddle.net/g9b7oj8t/

如果它是通过桌面访问的，它看起来不错

但是如果是手机访问的话，看起来就乱七八糟了

如何从materialize自定义css，让手机上的显示整洁？

标签： cssbootstrap-4responsivematerialize

解决方案

这是Materialize. 在这里你可以找到问题的参考。

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

这里是 JSFiddle 上的工作示例

但是要正常工作，您不能在单元格内使用太多样式，否则将不会尊重高度。

推荐阅读