如何自定义表格响应物化? [英] How can I custom table responsive materialize?

问题描述

我的脚本是这样的:

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

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

If it's accessed by desktop, it looks good

但是如果是手机访问的话，就显得很乱

But if it's accessed by mobile, it looks messy

如何从 materialize 中自定义 css 以便在移动设备上显示整洁?

How do I customize css from materialize so that the display on mobile is neat?

推荐答案

这是 Materialize 的一个已知问题.在这里您可以找到问题的参考.

This is a known issue with Materialize. Here you find the reference to the problem.

这是 GitHub 上提出的解决方案.

This is the proposed solution on 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 的工作示例

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

But to works properly you can't use too many styles inside the cells, otherwise the heights won't be respected.

这篇关于如何自定义表格响应物化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！