Блог

Главная - Вопросы по программированию - Как применить таблично-отзывчивый класс bootstrap для экрана с разрешением более 767 пикселей

Как применить таблично-отзывчивый класс bootstrap для экрана с разрешением более 767 пикселей

#html #css #twitter-bootstrap #responsive-design #html-table

#HTML #css #twitter-bootstrap #адаптивный дизайн #html-таблица

Вопрос:

по умолчанию мы знаем, что table-responsive класс bootstrap ограничен экранами, которые есть lesser than 767px . Как мы можем применить table-responsive класс bootstrap для lager screen that are more than 767px . 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>

Комментарии:

1. Создать пользовательский класс?

2. @AndyHolmes Могу ли я использовать тот же класс? Вместо создания нового.

3. Вы можете использовать тот же класс и добавить его в свой CSS вне медиа-запроса или внутри медиа-запроса с большей максимальной шириной

4. @Tom на самом деле я пытался реализовать тот же класс, используя медиа-запросы, но у меня не получилось

Ответ №1:

Вы используете этот класс в своем пользовательском CSS : 

 @media (max-width: 1200px) {  
.table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-x: scroll;
      overflow-y: hidden;
      border: 1px solid #ddd;
}
}

Комментарии:

1. класс работает, если вы увеличите свой TD, проверьте эту ссылку : codepen.io/inewton/pen/wzRqpj

2. спасибо за ваш ответ. Это работает, но я не хочу переносить текст или содержимое в новую строку (означает, что перенос слов происходит в коде, который вы мне предоставили).

3. если вы хотите избежать разрыва слов при изменении размера окна, вы должны использовать этот css-код, td { пробел: nowrap; переполнение: скрытый;} ссылка на источник: codepen.io/inewton/pen/wzRqpj — @e-Designary

4. Одна небольшая справка, как я могу исправить (исправленный заголовок) заголовок таблицы для этого codepen.io/anon/pen/eBBqZO

5. для фиксированного заголовка используйте { position: fixed; top: 0;} для первой строки и второй строки для {position: absolute; top: 30px;} codepen.io/inewton/pen/ObWONX