Как я могу материализовать персонализированные таблицы? - PullRequest
Новая
       37

Как я могу материализовать персонализированные таблицы?

0 голосов
/ 10 октября 2019

Мой скрипт выглядит так: 

<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 для материализации, чтобы дисплей на мобильном телефоне был аккуратным?

Ответы [ 2 ]

1 голос
/ 12 октября 2019

Это известная проблема с 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

Но для правильной работы нельзя использовать слишком много стилей внутри ячеек, иначе высоты не будутуважал.

0 голосов
/ 10 октября 2019

Вы только что пропустили внешнее div. В соответствии с рекомендациями BS4 -

Чтобы создать адаптивную таблицу, заключите таблицу в элемент, имеющий класс .table-response (или один из .table-responseive- * классы).

Итак, ваш код с обновленными классами будет - 

<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

...