如何自定义 table 响应式实现？

Question

我的脚本是这样的：

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

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

但是如果是手机访问的话，看起来很乱

如何从实体化自定义 css 以便在移动设备上显示整洁？

Answer 1

您刚刚错过了一个外部 div。根据 BS4 准则 -

To create a responsive table, enclose the table in a element that has the .table-responsive class (or one of the .table-responsive-* classes) applied.

因此，您的代码 更新后类 将是 -

<div class="table-responsive">
  <table class="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>
</div>
<style>
ul {
  list-style-type: none;
  padding: 5px;
}
</style>

参考this获取更多信息

Answer 2

这是 Materialize 的一个已知问题。 Here you find the reference to the problem.

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

Here the working example on JSFiddle

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

如何自定义 table 响应式实现？

How can I custom table responsive materialize?

css

materialize

bootstrap-4

responsive