CSS: реплицируйте таблицу Bootstrap table-sm и применяйте только к экранам мобильных устройств - PullRequest
Новая
       29

CSS: реплицируйте таблицу Bootstrap table-sm и применяйте только к экранам мобильных устройств

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

Я использую Bootstrap 4 , чтобы создать таблицу, которая начинается, как показано ниже. Bootstrap имеет встроенный класс "table-sm", который минимизирует заполнение (и, возможно, что-то еще), чтобы таблицы лучше подходили на небольших экранах.

Когда я применяю этот класс в приведенном ниже примере вместо "table-custom", он работает как задумано, но я хотел бы применить это только на мобильных (маленьких) экранах. Поэтому я создал класс "table-custom" и использовал приведенный ниже CSS, но я не могу заставить это работать.

Может кто-нибудь сказать мне, что еще я должен сделать, чтобы r повторил класс "table-sm" и ограничил его только мобильными (маленькими) экранами ?

Мой HTML (начало): 

<div class="table-responsive">
    <table class="table table-custom table-hover">
        <thead>
            <tr>

Мой CSS: 

@media (max-width: 767px) {
    .table-custom>thead>tr>th, 
    .table-custom>thead>tr>td, 
    .table-custom>tbody>tr>th, 
    .table-custom>tbody>tr>td, 
    .table-custom>tfoot>tr>th, 
    .table-custom>tfoot>tr>td {
        padding: 5px;
    }
}

Большое спасибо заранее,
Майк

Ответы [ 2 ]

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

Bootstrap не предоставляет ни одного варианта table-sm для небольших областей просмотра. Вы должны нацелить это с помощью медиазапроса начальной загрузки (CSS) 

@media (max-width: 767.98px) { 
 .table-custom th,
 .table-custom td {
     padding: .3em !important;
  }
}
0 голосов
/ 14 октября 2019

вы можете использовать встроенный класс начальной загрузки «реагирующий на таблицу», например, 

<div class="table-responsive">
    <table class="table">
      ...
    </table>
</div>

он будет работать на мобильных экранах в качестве прокручиваемой таблицы.

...