Изменить тело таблицы в соответствии с экраном - PullRequest
Новая
       23

Изменить тело таблицы в соответствии с экраном

2 голосов
/ 27 марта 2019

Я использую Bootstrap 3, у меня есть таблица, которая должна изменить тело в соответствии с размером экрана.Посмотрите на правила CSS (@media), это вариант, но я хотел, чтобы он работал как адаптивная таблица, поэтому мне не нужно указывать, какой размер, но он определяет только, если столбцы не соответствуют текущему размеру экрана

<table>
  <thead>
      <tr class="fullScreen">
        ...
      </tr> 
      <tr class="smartScreen">
        ...
      </tr>
  </thead>
  <tbody>
      <tr class="fullScreen">
         ...
      </tr> 
      <tr class="smartScreen">
         ...
      </tr>
   </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

Если вы используете загрузчик 3.3.7, тогда этот код поможет вам, вы просто помещаете class = "table table-responseive" в тег таблицы. Стол будет отзывчивым. 

<style>
    .table-responsive 
    { border: 0px !important; }
</style>



<body>
  <table class="table table-responsive">
   <thead>
     <tr>
       <td> col 1 </td>
       <td> col 2 </td>
     </tr> 
     <tr class="smartScreen">
       <td> col 1 </td>
       <td> col 2 </td>
    </tr>
 </thead>
 <tbody>
    <tr class="fullScreen">
      <td> col 1 </td>
      <td> col 2 </td>
    </tr> 
    <tr class="smartScreen">
      <td> col 1 </td>
      <td> col 2 </td>
   </tr>
 </tbody>

0 голосов
/ 27 марта 2019

Свойство Display должно работать.

Свойство Display https://getbootstrap.com/docs/4.0/utilities/display

Как это работает

Измените значение свойства экрана с помощью нашего адаптивногоотображать служебные классы.Мы намеренно поддерживаем только подмножество всех возможных значений для отображения.Классы могут быть объединены для различных эффектов, как вам нужно.

Сокрытие элементов 

Hidden on all   .d-none
Hidden only on xs   .d-none .d-sm-block
Hidden only on sm   .d-sm-none .d-md-block
Hidden only on md   .d-md-none .d-lg-block
Hidden only on lg   .d-lg-none .d-xl-block
Hidden only on xl   .d-xl-none
Visible on all  .d-block
Visible only on xs  .d-block .d-sm-none
Visible only on sm  .d-none .d-sm-block .d-md-none
Visible only on md  .d-none .d-md-block .d-lg-none
Visible only on lg  .d-none .d-lg-block .d-xl-none
Visible only on xl  .d-none .d-xl-block
...